轮播图封装

清早起来打开窗

心情美美哒

我又双叒叕来了！！！

今天分享的是封装轮播图的一种方法

直接上代码！

这是html布局

<div class="autoimg">
        <a href="javascript:;" style="z-index: 1;"><img src="images/lunbo01.jpg" alt="" class="img0"></a>
        <a href="javascript:;"><img src="images/lunbo02.jpg" alt="" class="img0"></a>
        <a href="javascript:;"><img src="images/lunbo03.jpg" alt="" class="img0"></a>
        <a href="javascript:;"><img src="images/lunbo04.jpg" alt="" class="img0"></a>
        <a href="javascript:;"><img src="images/lunbo05.jpg" alt="" class="img0"></a>
        <a href="javascript:;"><img src="images/lunbo06.jpg" alt="" class="img0"></a>
        <a href="javascript:;"><img src="images/lunbo07.jpg" alt="" class="img0"></a>
        <a href="javascript:;"><img src="images/lunbo08.jpg" alt="" class="img0"></a>
        <ul class="u1" style="z-index:9;">
        	<li class="l1" style="background: #B7ABFF"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        </ul>
        <div class="landr">
            <button class="btn fl" id="turnleft">&lt;</button>
            <button class="btn fr" id="turnright">&gt;</button>
        </div>
</div>

下面是js部分

function auto(box){  //参数传的是轮播图那个盒子的名
    var imgs = box.children("a").children();
    console.log(imgs);//获取图片
    var smcircle = box.children("ul").children();
    console.log(smcircle);//获取小圆点
    var imgs_len = box.children("a").length;
    console.log(imgs_len);//获取轮播图片的个数
    var left = box.children("div").children()[0];
    console.log(left);//获取左按钮
    var right = box.children("div").children()[1];
    console.log(right);//获取右按钮
    var timer = null;//声明一个时间函数
    var i = 0;//声明一个轮播图的下标

    //自动轮播时间函数
    function autolun(index){//轮播函数...注意参数
       imgs.hide().eq(index).fadeIn();
       smcircle.css({background:"#B7ABFF"}).eq(index).css({background:"white"});
    }
    timer = setInterval(function(){//时间函数..多久执行一次轮播函数
          i = i++ > imgs_len-1 ? 0 : i;//三元运算符..如果轮播到最后一张的话就从第一张开始
          autolun(i);
    },1000)

    //鼠标移动到小圆点上时
    smcircle.mouseover(function(){
       var index = $(this).index();
       autolun(index);
    })

    //鼠标移上去停止，移出来继续轮播
    box.hover(function(){
       clearInterval(timer);
    },function(){
       timer = setInterval(function(){
               i = i++ > imgs_len-1 ? 0 : i;
               autolun(i);
       },1000)
    })

    //上一张按钮
    $(left).click(function(){
       i = i-- < 0 ? imgs_len-1 : i;
       imgs.hide().eq(i).fadeIn();
       smcircle.css({background:"#B7ABFF"}).eq(i).css({background:"white"});
    })
    //下一张按钮
    $(right).click(function(){
       i = i++ > imgs_len-1 ? 0 : i;
       imgs.hide().eq(i).fadeIn();
       smcircle.css({background:"#B7ABFF"}).eq(i).css({background:"white"});
    })
}
auto($(".autoimg"));  //调用

好啦，就这些，有事启奏，无事退朝，hhh~