jQuery轮播图

上个文章给大家讲解了什么是面向对象编程今天我就用jQuery+面向对象的方式封装一个可选择透明度或者左右移动的轮播图。
废话不多说，直接上代码

css样式及html代码

<style>

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
#banner{
    width: 590px;
    height: 470px;
    margin: 0 auto;
    position: relative;
}
#banner .banner-img li{
    width: 590px;
    height: 470px;
    float: left;
    /* position: absolute; */
}
#banner .banner-img li img{
    width: 590px;
    height: 470px;
}
#banner .banner-tab{
    position: absolute;
    bottom: 20px;
    left: 10px;
    z-index: 999;
}
#banner .banner-tab li{
    float: left;
    height: 10px;
    width: 10px;
    background: rgba(86, 223, 215, 0.7);
    border-radius: 50%;
    margin-right: 10px;
    font-size: 10px;
}
#banner .banner-tab .active{
    background: rgb(5, 70, 247);
}
#banner .rbtn{
    width: 30px;
    height: 30px;
    background: #fff;
    opacity: 0.7;
    position: absolute;
    top:45%;
    right: 0;
    border: 0;
    font-size: 20px;
    color: #ccc;
    z-index: 999;
}
#banner .lbtn{
    width: 30px;
    height: 30px;
    background: #fff;
    opacity: 0.7;
    position: absolute;
    top:45%;
    left: 0;
    border: 0;
    font-size: 20px;
    color: #ccc;
    z-index: 999;
}

</style>

<div id="banner">
    <ul class="banner-img">
        <li>
            <a href="#"><img src="images/timg01.jpg"/></a>
        </li>
        <li>
            <a href="#"><img src="images/timg02.jpg"/></a>
        </li>
        <li>
            <a href="#"><img src="images/timg03.jpg"/></a>
        </li>
        <li>
            <a href="#"><img src="images/timg04.jpg"/></a>
        </li>
        <li>
            <a href="#"><img src="images/timg05.jpg"/></a>
        </li>
        <li>
            <a href="#"><img src="images/timg06.jpg"/></a>
        </li>
    </ul>
    <ol class="banner-tab">
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
    </ol>
    <button class="lbtn"><</button>
    <button class="rbtn">></button>
   <div>
   <script src="jquery-1.11.3.js"></script>

js代码

移动轮播我用了滚动条移动感觉这个要比定位移动流畅，上js代码

/*        
            node:输入dom元素，type:输入move:左右移动轮播 不输入就是透明度轮播   
    banner(node,type)
    dom结构 
    <div>=>node
        <ul class="banner-img"><li>图片<li></ul>
        <ol class='banner-tab'><li></li></ol> 需要设置class名字active的样式
        <button class="lbtn"><</button>不要按钮可以不创建或者只建一个也行
        <button class="rbtn">></button>
    </div>
    需要jquery
*/


(function(){//防止外面修改属性
    //ECMA6 class
    class Banner{
        constructor(node,type){
            this.node = node;
            this.imgs = node.find('.banner-img');
            this.img = this.imgs.find('li');
            this.btns = node.find('.banner-tab');
            this.rBtn = node.find('.rbtn');
            this.lBtn = node.find('.lbtn');        
            this.timer;
            if(type == 'move'){
                this.timer1;
                this.index = 1; //下标
                this.box = $(`<div></div>`);//创建一个div包裹this.img让滚动条运动
                this.box.css({width:this.img.width(),height:this.img.height(), overflow: 'hidden'});
                $(this.imgs).prependTo(this.box);
                $(this.box).prependTo(node);
                this.displacement = this.box.width();//每一次的移动距离
                $(this.img[0]).clone(true).appendTo(this.imgs);//把第一张图片复制后插到最后面
                $(this.img[this.img.length - 1]).clone(true).prependTo(this.imgs);//把最后一张图片复制后插到最前面
                $(this.imgs).width(this.displacement * (this.img.length + 2));//因为新插入了两张图片所以长度+2
                this.box.scrollLeft(this.displacement); //显示第一张图片的滚动条位置位置       
            } else{
                this.index = 0;//下标
                this.img[0].style.zIndex = 100;//让第一张图片显示在前面
            }
            this.btns.find('li').eq(0).addClass("active");//给ol下第一个li设置样式
        }

        init(type){
            this.autoMove(type); 
            this.tabSwitching(type);
            this.btnSwitching(type);  
            return this;//返回一个实例
        }

        autoMove(type){
            this.timer = setInterval(()=>{
                this.index++;
                this.tabMove(type);
            },2500)
        }

        tabMove(type){
            //判断左右移动轮播和透明度轮播
            if(type == 'move'){
                this.btns.find('li').removeClass("active").eq(this.index - 1).addClass("active");//先把所有li的class删除再给当前li的class设置  
                if(this.index == this.img.length + 1){   //this.index走到新插入的最后图片的下标时this.btns的第一个li设置样式
                    this.btns.find('li').eq(0).addClass("active");          
                }
                
                if(this.index == this.img.length + 2){//this,index走到超出索引时把滚动条拉到原本的第二张图片
                    this.index = 2;
                    this.box.scrollLeft(this.displacement * (this.index - 1));  
                    this.btns.find('li').eq(1).addClass("active");                   
                }
               
                if(this.index < 0){//下标小于0时返回最后一张图片的下标
                    this.index = this.img.length -1;
                    this.box.scrollLeft(this.displacement * (this.index + 1));                   
                }      
                this.scrollMove();//滚动条移动
            } else{    
                if(this.index == this.img.length){//下标到最后一张图片时变回第一张图片
                    this.index = 0;
                }
                if(this.index < 0){
                    this.index = this.img.length - 1;
                }
                this.btns.find('li').removeClass("active").eq(this.index).addClass("active");//先把所有li的class删除再给当前li的class设置 
                this.img.hide().css("opacity", 0.2).eq(this.index).show().animate({opacity: 1}, 800);
            }
        }

        tabSwitching(type){
            this.btns.on('mouseover',(e)=>{//箭头函数没有this指向所以使用上一层函数的this
                if(e.target.nodeName == 'LI'){//判断是否是li
                    clearInterval(this.timer);//清除计时器
                    if(type == 'move'){ //判断type                
                        this.index = $(e.target).index() + 1;                  
                    } else{
                        this.index = $(e.target).index();
                    }
                    this.tabMove(type);
                    this.autoMove(type);//重新启动
                }
            });

        }

        btnSwitching(type){
            this.rBtn.on('click',()=>{
                clearInterval(this.timer);//清除计时器
                this.index++;
                this.tabMove(type);
                this.autoMove(type);//启动运动
            });
            this.lBtn.on('click',()=>{
                clearInterval(this.timer);//清除计时器
                this.index--;            
                this.tabMove(type);           
                this.autoMove(type);//启动运动
            })
        }


        //滚动条移动
        scrollMove(){                                       
            clearInterval(this.timer1);//清除计算器
            var minStep = 0;//起始步数
            var maxStep = 20;//最大步数
            var start = this.box.scrollLeft();//运动起始位置
            var end = this.index * this.displacement;//结束位置
            var everyStep = (end - start)/maxStep;//每一步的距离
            this.timer1 = setInterval(()=>{
                minStep++;
                if (minStep >= maxStep) {//判断到达最大步数
                    clearInterval(this.timer1);//清除计算器
                }
                start += everyStep;//起始位置加上走的距离
                this.box.scrollLeft(start);
            },20);
        }
    }

    //对外接口
    window.banner = function(node,type){
        return new Banner(node,type).init(type);//返回一个实例对象并初始化
    }

})();


banner($('#banner'),'move');//这是移动

上面的代码要换透明度的话就是吧ul下面的li的浮动改成定位，这样调用banner($(’#banner’))就可以了

结尾

如果文章中有什么不足或者错误的地方欢迎大家留言分享。如果我的文章能帮到你的话那就给我个点赞和关注，谢谢朋友们的支持。