Node.js 이미지 캐러셀 효과 구현 code_javascript 기술
- WBOY원래의
- 2016-05-16 15:32:431432검색
우선 아래와 같이 js 이미지 캐러셀 효과를 살펴보겠습니다
구체적인 아이디어:
1. 페이지를 로드하고 전체 컨테이너를 가져옵니다. 숫자 인덱스는 모두 li이고 그림 목록은 ul입니다. 타이머 변수와 현재 인덱스를 저장하기 위한 변수 인덱스를 정의합니다
2. 타이머를 추가하고, 2초마다 인덱스를 증가시키고, 이미지 전환 기능을 호출합니다
팁:
1. 지수는 무한대로 계속 오를 수 없으며 판단이 필요합니다
2. 이미지 전환 함수 호출 시 증분된 인덱스를 파라미터로 전달해야 합니다
3. 이미지 전환 기능 정의
팁:
1. 숫자 인덱스를 사용하여 모든 li를 순회하고 각 li에서 클래스를 제거합니다.
2. 전달된 인덱스 값에 따라 해당 li을 찾아 클래스를 추가하고 현재 하이라이트로 설정합니다.
3. 전달된 인덱스 값을 바탕으로 그림이 위치한 ul의 상위 값을 계산합니다
4. 전달된 매개변수 값과 동일하도록 index 값을 변경합니다
참고: 사진이 배치된 ul의 상위 값 =-index*단일 사진의 높이(모든 사진의 높이가 동일해야 함)
4. 전체 컨테이너 위로 마우스를 이동하면 그림 전환이 중지되고 나가서 계속 진행합니다
팁:
1. 마우스가 전체 컨테이너 위로 슬라이드되면 타이머를 지웁니다
2. 마우스가 떠날 때 타이머를 계속 실행하고 다음 사진으로 전환
5. 숫자가 포함된 모든 li를 탐색하고, 여기에 색인을 추가하고, 마우스를 롤오버하면 해당 그림으로 전환합니다.
마우스가 슬라이드되면 그림 전환 함수가 호출되고 슬라이드되는 li의 인덱스가 전달됩니다.
구체적인 코드는 다음과 같습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;
padding:0;
list-style:none;}
.wrap{height:170px;
width:490px;
margin:60px auto;
overflow: hidden;
position: relative;
margin:100px auto;}
.wrap ul{position:absolute;}
.wrap ul li{height:170px;}
.wrap ol{position:absolute;
right:5px;
bottom:10px;}
.wrap ol li{height:20px; width: 20px;
background:#ccc;
border:solid 1px #666;
margin-left:5px;
color:#000;
float:left;
line-height:center;
text-align:center;
cursor:pointer;}
.wrap ol .on{background:#E97305;
color:#fff;}
</style>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic').getElementsByTagName("li"),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;
// 定义并调用自动播放函数
timer = setInterval(autoPlay, 2000);
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function () {
clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function () {
timer = setInterval(autoPlay, 2000);
}
// 遍历所有数字导航实现划过切换至对应的图片
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function () {
clearInterval(timer);
index = this.innerText - 1;
changePic(index);
};
};
function autoPlay () {
if (++index >= pic.length) index = 0;
changePic(index);
}
// 定义图片切换函数
function changePic (curIndex) {
for (var i = 0; i < pic.length; ++i) {
pic[i].style.display = "none";
list[i].className = "";
}
pic[curIndex].style.display = "block";
list[curIndex].className = "on";
}
};
</script>
</head>
<body>
<div class="wrap" id='wrap'>
<ul id="pic">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
위 내용은 이 글의 전체 내용입니다. js 이미지 캐러셀 효과 구현 코드가 마음에 드셨으면 좋겠습니다. 원하는 대로 이미지를 변경하고 나만의 이미지 캐러셀 효과를 만들어 보세요.