이 글에서는 JavaScript 캐러셀 스테이 효과를 구현하는 방법을 공유하겠습니다. 캐러셀 스테이는 둘 다 속성과 변수를 사용하여 캐러셀을 구현합니다. 관심있는 친구들 한번 보세요
1. Ideas
1. 매우 유사합니다. 캐러셀을 달성하기 위해 속성과 변수를 사용합니다.
2. 차이점은 캐러셀이 유지될 때 캐러셀 유지 효과를 달성하려면 전환 속성과 타이머를 추가해야 한다는 것입니다. 🎜 #
2. 단계
1. 기본 구조 스타일을 작성합니다. 🎜# 전환 시 번거로움을 없애기 위해 마지막에 첫 번째 사진과 동일한 사진을 하나 더 추가해야 합니다.
2. 이전 기반이 있습니다. 인덱스 서클의 기본 이벤트를 캐러셀 스테이 이벤트에 직접 추가하세요.
참고: 캐러셀이 마지막 이벤트에 도달하면 전환이 제거되어야 합니다. 여기서는 setTimeout 타이머가 사용되며 마지막 사진이 회전된 후 지연이 없으며 첫 번째 사진이 마지막 사진과 동일하므로 시각적인 장애가 발생합니다. 스팟이고 연속 회전 효과처럼 보입니다.
# 🎜🎜#//轮播停留方法 function move() { box.className = "box anmint"; circle[count].style.backgroundColor = ""; count++; box.style.marginLeft = (-800 * count) + "px"; //最后一张走完之后,执行一次定时器不循环,卡过渡时间,消除切换 setTimeout(function () { if (count >= 6) { count = 0; box.className = "box"; //marginLeft=0之前去除过渡属性 box.style.marginLeft = "0px"; } circle[count].style.backgroundColor = "red"; }, 500); }
값은 끝에 표시되어야 하므로 기본 동작이 다시 실행될 때 현재 표시된 이미지 바로 다음에 기본 동작이 실행됩니다.
//进入索引圈事件 for(var j=0;j<circle.length;j++){ circle[j].index=j; circle[j].onmouseenter=function(){ for(var k=0;k<circle.length;k++){ circle[k].style.backgroundColor=""; } this.style.backgroundColor="red"; //图片跟随移动 box.className="box anmint"; box.style.marginLeft=(-800*this.index)+"px"; count=this.index; } }
count=this.index
4. 마우스 입력 및 종료 코드 개선
효과 사진:전체 코드:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS轮播停留效果</title> <style> *{margin: 0;padding: 0;} html,body{width: 100%;height: 100%;} .block{ width: 800px; height: 400px; margin: 80px auto; position: relative; border: 1px solid red; overflow: hidden; } .box{ width: 5600px; height: 400px; float: left; } .anmint{ transition: all 0.5s ease-in-out; } img{ width: 800px; height: 400px; float: left; } .cir{ width: 150px; height: 20px; z-index: 7; position: absolute; bottom: 10px; left: 320px; } .circle{ width: 10px; height: 10px; border: 2px solid grey; border-radius: 50%; float: left; margin: 0 5px; } </style> <script> window.onload=function(){ var box=document.getElementsByClassName("box")[0]; var count=0; //索引圈事件 var circle=document.getElementsByClassName("circle"); circle[0].style.backgroundColor="red"; var time=setInterval(function(){ move(); },2000); //鼠标进入事件 var block=document.getElementsByClassName("block")[0]; block.onmouseenter=function(){ clearInterval(time); }; //鼠标离开事件 block.onmouseleave=function(){ time=setInterval(function(){ move(); },2000); }; //进入索引圈事件 for(var j=0;j<circle.length;j++){ circle[j].index=j; circle[j].onmouseenter=function(){ for(var k=0;k<circle.length;k++){ circle[k].style.backgroundColor=""; } this.style.backgroundColor="red"; //图片跟随移动 box.className="box anmint"; box.style.marginLeft=(-800*this.index)+"px"; count=this.index; } } //轮播停留方法 function move() { box.className = "box anmint"; circle[count].style.backgroundColor = ""; count++; box.style.marginLeft = (-800 * count) + "px"; //最后一张走完之后,执行一次定时器不循环,卡过渡时间,消除切换 setTimeout(function () { if (count >= 6) { count = 0; box.className = "box"; //marginLeft=0之前去除过渡属性 box.style.marginLeft = "0px"; } circle[count].style.backgroundColor = "red"; }, 500); } } </script> </head> <body> <p class="block"> <p class="box"> <img class="imgg" src="./image/box1.jpg"> <img class="imgg" src="./image/box2.jpg"> <img class="imgg" src="./image/box3.jpg"> <img class="imgg" src="./image/box4.jpg"> <img class="imgg" src="./image/box5.jpg"> <img class="imgg" src="./image/box6.jpg"> <img class="imgg" src="./image/box1.jpg"> </p> <p class="cir"> <p class="circle"></p> <p class="circle"></p> <p class="circle"></p> <p class="circle"></p> <p class="circle"></p> <p class="circle"></p> </p> </p> </body> </html>
#🎜🎜 # 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
vue.js 캐러셀 구성 요소 사용 방법 정보 VUE 3D 캐러셀 캡슐화 구현 방법위 내용은 JavaScript 캐러셀 스테이 효과 구현에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!