zoukankan      html  css  js  c++  java
  • jQuery图片轮播(一)轮播实现并封装

     

     

    利用面向对象自己动手写了一个封装好的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;
         812px;
        position: relative;
        overflow: hidden;
    }
    .banner ul li{
        position: absolute;
      top: 0;
      left: 0; } .banner ul li img{ height: 325px; 812px; display: block; } .ban-btn{ 100%; position: absolute; top: 136px; z-index: 2; } .ban-btn a{ display: inline-block; height: 60px; 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{ 100%; position: absolute; text-align: center; bottom: 15px; z-index: 2; } .indicator a{ display: inline-block; 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对象作为一个构造函数或原型对象,每次需要使用时在进行实例化操作,这样可满足多个轮播件同时使用的需求,同时做到最大化的函数复用。我会在后续的文章中解决这个问题,欢迎关注或提出指导。

  • 相关阅读:
    美女检测器
    汉字动画程序的原理
    值类型不是值类型(ValueType is NOT a Value Type):闲谈.Net类型
    PowerShell 简介
    Visual Studio 2012 RC 发布
    使用 MvcMiniProfiler 监控EF 4.1 with MySQL Provider
    NuGet安装及简单使用
    发布自己的NuGet程序
    Qizmt 单机及分布式部署注意事项
    JDynamic :支持Json反序列化为Dynamic对象
  • 原文地址:https://www.cnblogs.com/work-web/p/6130091.html
Copyright © 2011-2022 走看看