js轮播的三种实现方式
1、替换scr(入门级)
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style>.wrapper{width: 600px;height: 350px;margin: 0 auto;position: relative;}img{width: 100%;height: 100%;}.btn{width:150px;display: flex;justify-content: space-around;position: absolute;left:225px;bottom:10px;}.btn span{display: block;width:15px;height:15px;border: 3px solid white;border-radius: 50%;}.active{background-color: red;}</style></head><body><divclass="wrapper"><imgsrc="./imgs/1.png"alt=""><divclass="btn"><spanclass="active"></span><span></span><span></span><span></span><span></span></div></div><script>var _img=document.querySelector("img");var _wrapper=document.querySelector(".wrapper");var _spots=document.querySelectorAll(".btn span");var imgs=['./imgs/1.png','./imgs/2.png','./imgs/3.png','./imgs/4.png','./imgs/5.png']//自动播放autoplay();var id;var index=1;functionautoplay(){
id=setInterval(function(){
_img.src=imgs[index];//控制小圆点spots();
index++;if(index>=5){
index=0;}},2000)}//小圆点变化functionspots(){for(var i =0; i < _spots.length; i++){if(i==index){
_spots[i].className="active"}else{
_spots[i].className=""}}}//悬浮时停止
_wrapper.onmouseover=function(){clearInterval(id);}//离开时继续
_wrapper.onmouseout=function(){autoplay();}</script></body></html>
效果图:
2、滚动条（进阶版）
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.wrapper{width: 900px;height: 350px;overflow: hidden;overflow: auto;margin: 0 auto;}img{width: 900px;height: 350px;}.contain{display: flex;width: 5400px;}</style></head><body><divclass="wrapper"><divclass="contain"><imgsrc="./img/10011.jpg"/><imgsrc="./img/10012.jpg"/><imgsrc="./img/10013.jpg"/><imgsrc="./img/10014.jpg"/><imgsrc="./img/10015.jpg"/><imgsrc="./img/10011.jpg"/></div></div><script>var _wrapper = document.querySelector(".wrapper");var index =0;var num =setInterval(function(){//滚动一张var moveLength =0;//用标识是否走完一张var id =setInterval(function(){
_wrapper.scrollLeft +=12;
moveLength +=12if(moveLength >=900){clearInterval(id);}},20)//一张需要2250毫秒
index++;// 走完所有下标和滚动都要从0开始if(index >=6){
index =0;
_wrapper.scrollLeft =0;}},3000)</script></body></html>
效果图：
3、定位（豪华版）
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.wrapper{width: 900px;height: 350px;overflow: hidden;margin: 0 auto;position: relative;}img{width: 900px;height: 350px;}.contain{display: flex;width: 4500px;position: absolute;left: 0;top: 0;}.btn{width: 150px;display: flex;justify-content: space-around;position: absolute;left: 375px;bottom: 10px;}.btn span{display: block;width: 15px;height: 15px;border: 3px solid white;border-radius: 50%;}.wrapper a{text-decoration: none;font-size: 50px;color: red;position: absolute;top: 35%;}.wrapper a:nth-of-type(1){left: 10px;}.wrapper a:nth-of-type(2){right: 10px;}.active{background-color: red;}</style></head><body><divclass="wrapper"><divclass="contain"><imgsrc="./img/10011.jpg"/><imgsrc="./img/10012.jpg"/><imgsrc="./img/10013.jpg"/><imgsrc="./img/10014.jpg"/><imgsrc="./img/10015.jpg"/></div><divclass="btn"><spanclass="active"></span><span></span><span></span><span></span><span></span></div><ahref="javascript:void(0);"><</a><ahref="javascript:void(0);">></a></div><script>var _wrapper = document.querySelector(".wrapper");var _contain = document.querySelector(".contain");var _btn = document.querySelector(".btn");//下一张按钮var _nextPic = document.querySelector(".wrapper a:nth-of-type(2)");// 上一张按钮var _prevPic = document.querySelector(".wrapper a:nth-of-type(1)");var _btn = document.querySelector(".btn");//获取所有小圆点var _spots = document.querySelectorAll(".btn span");// 下一张
_nextPic.onclick=function(){next_pic();}var index =0;functionnext_pic(){
_contain.style.left = _contain.offsetLeft -900+"px";if(_contain.offsetLeft <=-4500){
_contain.style.left =0;}
index++;if(index >4){
index =0;}spots();}// 上一张
_prevPic.onclick=function(){prev_pic();}functionprev_pic(){
_contain.style.left = _contain.offsetLeft +600+"px";if(_contain.offsetLeft >0){
_contain.style.left =-3600+"px";}
index--;if(index <0){
index =4;}spots();}//自动轮播autoplay();var id;functionautoplay(){
id =setInterval(function(){next_pic();},2000)}//小圆点变化functionspots(){for(var i =0; i < _spots.length; i++){if(i == index){
_spots[i].className ="active"}else{
_spots[i].className =""}}}//悬停控制
_wrapper.onmouseover=function(){clearInterval(id);}
_wrapper.onmouseout=function(){autoplay();}//悬浮小圆点更新图片
_btn.onmouseover=function(event){//获取悬浮的小圆点var target = event.srcElement || event.target;if(target.nodeName =='SPAN'){//查询小圆点下标var n = Array.from(_spots).findIndex(function(tag){return tag == target
})//更新下标
index = n;//更新位移
_contain.style.left =-900* n +"px";//更新颜色spots();}}</script></body></html>
效果图：
本文转载自: https://blog.csdn.net/adminsir0/article/details/126588277
版权归原作者 三生有幸ii 所有， 如有侵权，请联系我们删除。
版权归原作者 三生有幸ii 所有， 如有侵权，请联系我们删除。