Jquery和纯JS实现轮播图（一）--左右切换式

àì夳堔傛蜴生んèń 2022-06-17 14:26 402阅读 0赞

给大家分享下常见 的左右切换式轮播图；  
**一、页面结构**  
对于左右切换式的轮播图的结构主要分为以下几个部分：  
1、首先是个外围部分（其实也就是最外边的整体wrapper)  
2、其次就是你设置图片轮播的地方（也就是一个container吧）  
3、然后是一个图片组（可以用新的div 也可以直接使用 ul–>li形式）  
4、然后是图片两端的左箭头和右箭头  
7、然后是一个按钮层，用来定位图片组的index吧,一般放在图片的下方(div 或 ul–>li)

<div id="warpper">
            <div class="container">
                
                <ul class="imgList">
                    <li><img src="./images/img1.jpg" alt=""></li>
                    <li><img src="./images/img2.jpg" alt=""></li>
                    <li><img src="./images/img3.jpg" alt=""></li>
                    <li><img src="./images/img4.jpg" alt=""></li>
                    <li><img src="./images/img5.jpg" alt=""></li>
                    <li><img src="./images/img6.jpg" alt=""></li>
                </ul>
                
                <img src="./images/pre.png" width="40px" height="60px" class="pre">
                <img src="./images/next.png" width="40px" height="60px" class="next">
                       
                <ul class="dollList">
                    <li class="sec"><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
            </div> 
        </div>

**二、CSS样式**  
左右切换式则是采用图片li 浮动，父层元素ul 总宽为总图片宽，并设定为有限container宽度下隐藏超出宽度的部分;然后当想切换到某序号的图片时，则采用其ul 定位 left样式设定相应属性值实现  
比如显示第一张图片初始定位left为0px, 要想显示第二张图片则需要left:-800px 处理;;

<style> *{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } #warpper{ width: 800px; height: 600px; margin: 20px auto;} .container{ width: 100%; height: 100%; overflow: hidden; position: relative; } .imgList{ width: 4800px; position: absolute; z-index: 5; } .imgList>li{ float: left; width: 800px; height: 600px; } .imgList>li>img{ width: 100%; height: 100%; } .pre,.next{ position: absolute; top: 275px; background: rgba(220,220,220,0.7); padding: 10px 0; z-index: 100; opacity: 0.6; filter: alpha(opacity=60); } .pre:hover,.next:hover{ cursor: pointer; opacity: 1; filter: alpha(opacity=100); } .pre{ left: 10px; } .next{ right: 10px; } .dollList{ width:180px; position: absolute; z-index: 10; bottom: 20px; left: 310px ; } .dollList li{ float: left; margin-right: 10px; } .dollList li.sec a{ background: orange; } .dollList li a{ width: 15px; height: 15px; background: rgba(230,230,230,0.6); border-radius: 50%; display: inline-block; } </style>

**三、JS处理**  
*（1）jquery处理：*

<script> $(function(){ //设置全局变量 var cur = 0; //当前的图片序号 imgLen = $(".imgList li").length; //获取图片的数量 timer = null; //设置定时定时器的名字，方便后面关闭 //当鼠标移到向左和向右的图标上关闭定时器，离开时则重置定时器 $(".pre,.next").hover(function(){ clearInterval( timer ); },function(){ changeImg( ); }); //当鼠标移到图片上关闭定时器，离开时则重置定时器 $(".imgList").hover(function(){ clearInterval( timer ); },function(){ changeImg( ); }); //点击向左图标根据cur进行上一个图片处理 $(".pre").click(function(){ cur = cur>0 ? (--cur) : (imgLen-1); changeTo( cur ); }); //点击向右图标根据cur进行上一个图片处理 $(".next").click(function(){ cur = cur<( imgLen-1 ) ? (++cur) : 0; changeTo( cur ); }); //为下方的圆点按钮绑定事件 $(".dollList li").hover(function(){ clearInterval(timer); var index = $(this).index(); cur = index changeTo(cur); },function(){ changeImg(); }); //封装图片自动播放函数 function changeImg(){ timer = setInterval(function(){ if( cur<imgLen-1 ){ cur++; }else{ cur=0; } changeTo( cur ); },2000); } //调用函数 changeImg(); //图片切换函数 function changeTo( num ){ var go = num*800; $(".imgList").animate({ "left" : -go },500); $(".dollList").find("li").removeClass("sec").eq(num).addClass("sec"); } }); </script>

jquery这样就能实现左右切换式轮播图了，简便，原生JS代码量就有些多了；  
*（2）原生JS处理：*

<script> var cur = 0, //当前的图片序号 imgLis = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组 imgLen = imgLis.length, //获取图片的数量 timer = null; //设置定时定时器的名字，方便后面关闭 dollLis = getElementsByClassName("dollList")[0].getElementsByTagName("li"); //获取下方圆点 //封装图片自动播放函数 function changeImg(){ timer = setInterval(function(){ if(cur < imgLen -1){ cur ++; }else{ cur = 0; } //调用变换处理函数 changeTo(cur); },2500); } changeImg(); //调用添加事件处理 addEvent(); //给左右箭头和右下角的图片index添加事件处理 function addEvent(){ for(var i=0;i<imgLen;i++){ //闭包防止作用域内活动对象item的影响 (function(_i){ //鼠标滑过则清除定时器，并作变换处理 dollLis[_i].onmouseover = function(){ clearTimeout(timer); changeTo(_i); cur = _i; }; //鼠标滑出则重置定时器处理 dollLis[_i].onmouseout = function(){ changeImg(); }; })(i); } //给左箭头prev添加上一个事件 var pre = getElementsByClassName("pre")[0]; pre.onmouseover = function(){ //滑入清除定时器 clearIntervcural(timer); }; pre.onclick = function(){ //根据curIndex进行上一个图片处理 cur = (cur > 0) ? (--cur) : (imgLen - 1); changeTo(cur); }; pre.onmouseout = function(){ //滑出则重置定时器 changeImg(); }; //给右箭头next添加下一个事件 var next = getElementsByClassName("next")[0]; next.onmouseover = function(){ clearInterval(timercur); }; next.onclick = function(){ cur = (cur < imgLen - 1) ? (++cur) : 0; changeTo(cur); }; next.onmouseout = function(){ changeImg(); }; } //左右切换处理函数 function changeTo(num){ //设置image var imgList = getElementsByClassName("imgList")[0]; goLeft(imgList,num*800); //左移一定距离 //设置image的控制下标 index var _curIndex = getElementsByClassName("sec")[0]; removeClass(_curIndex,"sec"); addClass(dollLis[num],"sec"); } //图片组相对原始左移dist px距离 function goLeft(elem,dist){ if(dist == 800){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;" elem.style.left = "0px"; } var toLeft; //判断图片移动方向是否为左 dist = dist + parseInt(elem.style.left); //图片组相对当前移动距离 if(dist<0){ toLeft = false; dist = Math.abs(dist); }else{ toLeft = true; } for(var i=0;i<= dist/20;i++){ //这里设定缓慢移动，10阶每阶80px (function(_i){ var pos = parseInt(elem.style.left); //获取当前left setTimeout(function(){ pos += (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变 //console.log(pos); elem.style.left = pos + "px"; },_i * 25); //每阶间隔50毫秒 })(i); } } </script>

注：getElementsByClassName()是我在另外一个js文件里封装的函数，可以参考我的另一篇博客：[ JS封装通过className获取元素的函数][JS_className]  
以上就是关于Jquery和纯JS实现轮播图–左右切换式的内容了。

[JS_className]: http://blog.csdn.net/m0_38099607/article/details/70904129

发表评论取消回复

表情：

评论列表（有 0 条评论，402人围观）

还没有评论，来说两句吧...

相关阅读

相关纯JS实现左右滑动轮播图

效果图（完整代码在最下面） ![美末2属实⑧行][2] 轮播图的功能要求每次只显示一张图片轮播图需要实现左右无缝切换需要实现跳转（放

怼烎@/ 2023年02月26日 07:28/ 0 赞/ 6 阅读

相关纯js实现轮播图插件

第一步首先，先建立一个普通的HTML里面有一个id是banner的div <!DOCTYPE html> <html> <head>

港控/mmm°/ 2022年11月28日 16:30/ 0 赞/ 471 阅读

相关左右无缝轮播html,JS实现左右无缝轮播图代码

废话不多说了，直接给大家贴代码了。无缝轮播图：无缝轮播图 \\{margin: 0;padding:0; \} ul\{list-style: none;\} .

痛定思痛。/ 2022年10月10日 02:09/ 0 赞/ 391 阅读

相关 JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播

效果一： ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2xpbldhbmc_size

红太狼/ 2022年09月10日 11:12/ 0 赞/ 398 阅读

相关纯css实现轮播图

轮播图的实现原理其实是比较简单的举个例子 <div class="main"> <div class="div-main"></div>

左手的ㄟ右手/ 2022年07月11日 15:22/ 0 赞/ 261 阅读

相关 Jquery和纯JS实现轮播图（一）--左右切换式

给大家分享下常见的左右切换式轮播图；一、页面结构对于左右切换式的轮播图的结构主要分为以下几个部分： 1、首先是个外围部分（其实也就是最外边的整体wrapper

àì夳堔傛蜴生んèń/ 2022年06月17日 14:26/ 0 赞/ 403 阅读

相关 Jquery和纯JS实现轮播图（二）--淡入淡出切换式

之前有写过一篇轮播图，是左右切换式的，可以参考[ Jquery和纯JS实现轮播图（一）–左右切换式][Jquery_JS] 今天分享一下淡入淡出式的轮播图，同样也是用纯js

﹏ヽ暗。殇╰゛Y/ 2022年06月16日 13:00/ 0 赞/ 416 阅读

相关 js实现图片左右轮播（一）

js掌握的不是很熟练，但是经常会碰到页面有轮播图，所以这里就记录一下每次自己遇到的轮播效果。 ![20170619171107199][] 首先是html ![20

喜欢ヅ旅行/ 2022年06月14日 11:39/ 0 赞/ 218 阅读

相关 jQuery实现轮播图(一)

轮播概念图 ![这里写图片描述][SouthEast] 这里的轮播图的轮播方式是自动每隔一段时间向左移动一张图，循环滚动（还有变换透明度来实现轮播的）轮播图的原理很简

爱被打了一巴掌/ 2022年06月12日 13:45/ 0 赞/ 435 阅读

相关 jquery 实现轮播图_滑动切换

<!doctype html> <html> <head> <meta charset="utf-8"> <titl

待我称王封你为后i/ 2022年05月11日 12:56/ 0 赞/ 350 阅读