轮播图封装

清早起来打开窗

心情美美哒

我又双叒叕来了！！！

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

直接上代码！

这是html布局

        
        
        
        
        
        
        
        
        

        	

        	

        	

        	

        	

        	

        	

        	

        
        

            <
            >
        

下面是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~