JQ 图片轮播并封装

Posted 2020-08-21 代码恶童

利用面向对象自己动手写了一个封装好的jquery轮播对象，可满足一般需求，需要使用时只需调用此对象的轮播方法即可。

demo：https://github.com/zsqosos/shopweb

具体代码如下：

html结构：

 1 <div class="banner" id="J_bg_ban">
 2 　　<ul>
 3 　　　　<li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li>
 4 　　　　<li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li>
 5 　　　　<li><a href="#"><img src="banner_03.jpg" alt="广告图"/></a></li>
 6 　　　　<li><a href="#"><img src="banner_04.jpg" alt="广告图"/></a></li>
 7 　　　　<li><a href="#"><img src="banner_05.jpg" alt="广告图"/></a></li>
 8 　　</ul>
 9 　　<div class="indicator" id="J_bg_indicator">
10 　　</div>
11 　　<div class="ban-btn clearfloat" id="J_bg_btn">
12 　　　　<a class="next-btn fr" href="javascript:">&gt;</a><a class="prev-btn fl" href="javascript:">&lt;</a>
13 　　</div>
14 </div>

 

 css样式：

.banner {
    height: 325px;
    width: 812px;
    position: relative;
    overflow: hidden;
}
.banner ul li{
    position: absolute;
　　top: 0;
　　left: 0;
}
.banner ul li img{
    height: 325px;
    width: 812px;
    display: block;
}
.ban-btn{
    width: 100%;
    position: absolute;
    top: 136px;
    z-index: 2;
}
.ban-btn a{
    display: inline-block;
    height: 60px;
    width: 35px;
    background: rgba(180,180,180,0.5);
    font-size: 25px;
    text-align: center;
    line-height: 60px;
    color: #fff;
}
.ban-btn a:hover{
    background: rgba(100,100,100,0.5);
}
.indicator{
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 15px;
    z-index: 2;
}
.indicator a{
    display: inline-block;
    width: 20px;
    height: 5px;
    margin:0 3px;
    background: #fff;
}
.indicator-active{
    background: #FF8C00!important;
}

jquery代码：

$.carousel = {
    now : 0,                    //当前显示的图片索引
    hasStarted : false,         //是否开始轮播
    interval : null,            //定时器
    liItems : null,             //要轮播的li元素集合
    len : 0,                    //liItems的长度
    aBox : null,                //包含指示器的dom对象
    bBox : null,                //包含前后按钮的dom对象

    /**
     * 初始化及控制函数
     * @param bannnerBox string 包含整个轮播图盒子的id或class
     * @param aBox  string 包含指示器的盒子的id或class
     * @param btnBox string 包含前后按钮的盒子的id或class
     */
    startPlay : function(bannnerBox,aBox,btnBox) {
        //初始化对象参数
        var that = this;
        this.liItems = $(bannnerBox).find(\'ul\').find(\'li\');
        this.len = this.liItems.length;
        this.aBox = $(bannnerBox).find(aBox);
        this.bBox = $(bannnerBox).find(btnBox);
        //让第一张图片显示，根据轮播图数量动态创建指示器，并让第一个指示器处于激活状态，隐藏前后按钮
        this.liItems.first(\'li\').css({\'opacity\': 1, \'z-index\': 1}).siblings(\'li\').css({\'opacity\': 0, \'z-index\': 0});
        var aDom = \'\';
        for (var i = 0; i < this.len; i++){
            aDom += \'<a></a>\';
        }
        $(aDom).appendTo(this.aBox);
        this.aBox.find(\'a:first\').addClass("imgnum-active");
        this.bBox.hide();
        //鼠标移入banner图时，停止轮播并显示前后按钮，移出时开始轮播并隐藏前后按钮
        $(bannnerBox).hover(function (){
            that.stop();
            that.bBox.fadeIn(200);
        }, function (){
            that.start();
            that.bBox.fadeOut(200);
        });
        //鼠标移入指示器时，显示对应图片，移出时继续播放
        this.aBox.find(\'a\').hover(function (){
            that.stop();
            var out = that.aBox.find(\'a\').filter(\'.indicator-active\').index();
            that.now = $(this).index();
            if(out!=that.now) {
                that.play(out, that.now)
            }
        }, function (){
            that.start();
        });
        //点击左右按钮时显示上一张或下一张
        $(btnBox).find(\'a:first\').click(function(){that.next()});
        $(btnBox).find(\'a:last\').click(function(){that.prev()});
        //开始轮播
        this.start()
    },
    //前一张函数
    prev : function (){
        var out = this.now;
        this.now = (--this.now + this.len) % this.len;
        this.play(out, this.now);
    },
    //后一张函数
    next : function (){
        var out = this.now;
        this.now = ++this.now % this.len;
        this.play(out, this.now);
    },
    /**
     * 播放函数
     * @param out number 要消失的图片的索引值
     * @param now number 接下来要轮播的图的索引值
     */
    play : function (out, now){
        this.liItems.eq(out).stop().animate({opacity:0,\'z-index\':0},500).end().eq(now).stop().animate({opacity:1,\'z-index\':1},500);
        this.aBox.find(\'a\').removeClass(\'imgnum-active\').eq(now).addClass(\'indicator-active\');
    },
    //开始函数
    start : function(){
        if(!this.hasStarted) {
            this.hasStarted = true;
            var that = this;
            this.interval = setInterval(function(){
                that.next();
            },2000);
        }
    },
    //停止函数
    stop : function (){
        clearInterval(this.interval);
        this.hasStarted = false;
    }
};

$(function(){
　　$.carsouel.startPlay(\'#J_bg_bn\',\'#J_bg_indicator\',\'#J_bg_btn\');
})

 

最初实现时使用面向过程的方法来完成，虽然可以达到想要的效果，但代码复用性不高，需要为页面上每一个需要轮播的模块分别写对应的函数。进行封装后，不需要写太多的代码，使用时只需调用carsouel的startPlay方法并传入三个参数即可，大大提高了易用性。

但是，当前代码的缺陷也非常明显，就是当一个页面上同时有多个轮播件需要轮播时，只有最后一个会正常工作，这是由于carsouel对象只有一个，可以通过复制carsouel对象来解决这个问题，如：

    var banner1 = $.extend(true,{},carousel);
    var banner2 = $.extend(true,{},carousel);
    var banner3 = $.extend(true,{},carousel);
    banner1.startPlay(\'#J_bg_ban1\',\'#J_bg_indicator1\',\'#J_bg_btn1\');
    banner2.startPlay(\'#J_bg_ban2\',\'#J_sm_indicator2\',\'#J_bg_btn2\');
    banner3.startPlay(\'#J_bg_ban3\',\'#J_sm_indicator3\',\'#J_bg_btn3\');

 

这样虽然可以满足需求，但每次调用都会复制出一个新的对象，不仅影响性能，carsouel对象内的方法还不能够重用，所以还需要进一步改进。

要想让多个轮播件可以同时使用carsouel对象，并且可以复用carsouel对象内部的函数，必须将carsouel对象作为一个构造函数或原型对象，每次需要使用时在进行实例化操作，这样可满足多个轮播件同时使用的需求，同时做到最大化的函数复用。我会在后续的文章中解决这个问题，欢迎关注或提出指导。

 

 

本文转载自：http://www.cnblogs.com/zsqos/p/6126782.html