js로 이미지 캐러셀 효과를 만드는 방법
- PHP中文网원래의
- 2017-06-22 14:43:521650검색
이 글에서는 JS 이미지 캐러셀 효과의 구현 코드를 주로 소개하고, JS 이미지 캐러셀 효과를 원활하게 구현하기 위한 주의사항을 설명합니다. 살펴보겠습니다
먼저 아래와 같이 js 이미지 캐러셀 효과를 살펴보겠습니다.
구체적인 아이디어:
1. 디지털 인덱스를 위한 모든 li 및 사진 넣기 목록의 ul은 타이머를 보유하는 변수와 현재 인덱스를 저장하는 변수 인덱스를 정의합니다. 2. 타이머를 추가하고 2초마다 인덱스를 증가시키며 전환 이미지를 호출합니다. 팁:
1. 인덱스는 무한정 증가하므로 판단이 필요합니다 2. 이미지 전환 함수를 호출할 때 증가된 인덱스를 매개변수로 전달해야 합니다 3. 이미지를 정의합니다. 전환 기능
팁:
1. 모든 숫자 인덱스 li를 탐색하고 각 li에서 클래스를 제거합니다. 2. 전달된 인덱스 값에 따라 해당 li을 찾아 클래스를 추가하고 현재 하이라이트로 설정합니다. 3. 전달된 index 값을 기준으로 그림이 있는 ul의 상위 값을 계산합니다. 4. 전달된 매개 변수 값과 같도록 index의 값을 변경합니다.
참고: 그림이 있는 ul의 상위 값 배치 = -index*단일 사진 높이(모든 사진의 높이가 동일해야 함)
4. 전체 컨테이너 위로 마우스를 이동하면 사진 전환이 중지되고 떠난 후에도 계속됩니다.
팁:
1. 마우스가 전체 컨테이너 위로 미끄러질 때 2. 마우스가 떠날 때 타이머를 계속 실행하고 다음 그림으로 전환 5. 숫자가 포함된 모든 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>
<p 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>
</p>
</body>
</html>위 내용은 js로 이미지 캐러셀 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!