2018-07-30

2018-07-30 本文已影响0人老头子_d0ec

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

一、页面结构

对于左右切换式的轮播图的结构主要分为以下几个部分：
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处理：

//封装图片自动播放函数
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添加下一个事件

//左右切换处理函数

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距离