자 바스 크 립 트 는 하위 메뉴 와 컨트롤 이 있 는 슬라이더 라운드 맵 효 과 를 구현 합 니 다.
구현 효과:
실현 원리:
//단계
//1.이벤트 원본 및 관련 요소 가 져 오기
//2.첫 번 째 그림 이 있 는 li 를 복사 하여 ul 의 맨 뒤에 추가 합 니 다.
//3.ol 에 li,ul 의 개수-1 개 를 추가 하고 첫 번 째 단 추 를 활성화 합 니 다.
//4.마우스 로 ol 의 li 위 에 올 려 놓 고 그림 전환
//5.타이머 추가
//6.그림 을 좌우 로 전환 합 니 다(마 우 스 를 올 려 숨 기 고 디 스 플레이 를 옮 깁 니 다)
구현 코드:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all{
width: 500px;
height: 200px;
padding: 7px;
margin: 100px auto;
position: relative;
box-shadow: 1px 1px 5px #2d2d2d;
}
.screen{
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li{
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul{
position: absolute;
left: 0;
top: 0;
width: 3000px;
}
.all ol{
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li{
float: left;
width: 20px;
height: 20px;
text-align: center;
background-color: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current{
background-color: #03c03c;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
left: 5px;
top: 50%;
position: absolute;
margin-top: -20px;
background-color: #000;
cursor: pointer;
line-height: 35px;
text-align: center;
font-weight: bold;
font-family: " ";
font-size: 30px;
color: #fff;
opacity: 0.3;
border-radius: 50%;
box-shadow: 1px 1px 3px #2d2d2d;
}
#arr #right{
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id="all">
<div class="screen" id="screen">
<ul id="ul">
<li><img src="./images/01.jpg" width="500" height="200"></li>
<li><img src="./images/02.jpg" width="500" height="200"></li>
<li><img src="./images/03.jpg" width="500" height="200"></li>
<li><img src="./images/04.jpg" width="500" height="200"></li>
<li><img src="./images/05.jpg" width="500" height="200"></li>
</ul>
<!-- -->
<ol>
</ol>
<!-- -->
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</div>
<!-- script -->
<script type="text/javascript">
// ul ， ， ， ，
//
// 1.
// 2. li， ul
// 3. ol li，ul -1 ，
// 4. ol li
// 5.
// 6. （ ， ）
// 1.
var all = document.getElementById("all");
var screen = all.firstElementChild || all.firstChild;
var imgWidth = screen.offsetWidth;
var ul = screen.firstElementChild || screen.firstChild;
var ol = screen.children[1];
var div = screen.lastElementChild || screen.lastChild;
var spanArr = div.children;
// 2. li， ul
var ulNewLi = ul.children[0].cloneNode(true);
ul.appendChild(ulNewLi);
// 3. ol li，ul -1 ，
for(var i=0; i<ul.children.length-1; i++){
var olNewLi = document.createElement("li");
olNewLi.innerHTML = i+1;
ol.appendChild(olNewLi);
}
var olLiArr = ol.children;
olLiArr[0].className = "current";
// 4. ol li
for(var i=0; i<olLiArr.length; i++){
// ， index
olLiArr[i].index = i;
olLiArr[i].onmouseover = function(){
//
for(var j=0; j<olLiArr.length; j++){
olLiArr[j].className = "";
}
this.className = "current"
// ， key square
// key = this.index;
// square = this.index;
key = square = this.index;
//
animate(ul, -this.index*imgWidth);
}
}
// 5.
var timer = setInterval(autoPlay, 1000);
//
// （ ， ）
var key = 0;
var square = 0;
function autoPlay(){
// key ， ul
key++;
if(key > olLiArr.length){
// ， ，
ul.style.left = 0;
key = 1;
}
animate(ul, -key*imgWidth);
// square ，
//
square++;
if(square > olLiArr.length-1){
// 5， 5 0；
square = 0;
}
for(var i=0; i<olLiArr.length; i++){
olLiArr[i].className = "";
}
olLiArr[square].className = "current";
}
// ，
all.onmouseover = function(){
div.style.display = "block";
clearInterval(timer);
}
all.onmouseout = function(){
div.style.display = "none";
timer = setInterval(autoPlay,1000);
}
// 6. （ ， ）
spanArr[0].onclick = function(){
// key ， ul
key--;
if(key<0){
// ， key ，
ul.style.left = -imgWidth*(olLiArr.length) + "px";
key = olLiArr.length-1;
}
animate(ul, -key*imgWidth);
// square ，
square--;
if(square<0){
// 5， 5， 0
square = olLiArr.length-1;
}
for(var i=0; i<olLiArr.length; i++){
olLiArr[i].className = "";
}
olLiArr[square].className = "current";
}
spanArr[1].onclick = function(){
//
autoPlay();
}
//
var absSpeed = 10; //
function animate(ele, target){
clearInterval(ele.timer);
var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
ele.timer = setInterval(function(){
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
if(Math.abs(val) < Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
}, 10)
}
</script>
</body>
</html>위 에서 말씀 드 린 것 은 자 바스 크 립 트 가 하위 메뉴 와 컨트롤 이 있 는 슬라이더 라운드 맵 효 과 를 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
