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

来源：互联网发布：splay tree java 编辑：程序博客网时间：2024/06/04 18:05

给大家分享下常见的左右切换式轮播图；
一、页面结构
对于左右切换式的轮播图的结构主要分为以下几个部分：
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获取元素的函数
以上就是关于Jquery和纯JS实现轮播图–左右切换式的内容了。

1 0