写了一个jQuery面向对象轮播图插件,单个实例正常,但多个实例异常-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

写了一个jQuery面向对象轮播图插件,单个实例正常,但多个实例异常

小旋风柴进 2016-05-31 09:10:59 1850

问题描述:
单个实例是正常的,但二个实例时鼠标放在第一个实例上去后不停止播放,还是继续自动滚动播放,而第二个实例鼠标放上去后正常停止播放,问题何在呢,麻烦大家给看看,另外大家给提点建议,看看结构能不能改进的地方,谢谢

插件:jquery.playsee.js

/*
*
*插件:playsee 功能:图片轮播
*
* */

;(function($, window, document, undefined){

    //定义一个构造函数对象 Seesee 
    var Seesee = function(ele,opt){

        this.$ele = $(ele); //ID定义

        //基本DOM选择器配置
        this.CONFIG = {
            'titleNav': this.$ele.find(".title-nav li"), //标题显示
            'sliderPrev': this.$ele.find(".slider-prev"), //左箭头
            'slidernext': this.$ele.find(".slider-next"), ////右箭头
            'icoNav': this.$ele.find(".slider-nav li"), //图标导航
            'numNav': this.$ele.find(".num-nav b"), //数字显示
            'sliderMain': this.$ele.find(".slider-main"), //图片列表
            'index': 0 //当前索引号
        };

        //定义用户可更改的默认值
        this.defaults = {
            'width': 395, //视口或图片宽度
            'speed': 10, //速度
            'imgNum': 4 //图片数量
        };

        //定义并接受合成设置的值
        this.settings = $.extend({}, this.defaults, opt);

    };

    //Seesee 的方法
    Seesee.prototype = {
        initialize: function(){
            var _this = this;

            //默认开始播放 (改变index)
            this.play();

            //下一个按钮点击事件 (改变index)
            this.CONFIG.slidernext.click(function(){
                _this.getIndex()();
                _this.slidernextBtn(_this.CONFIG.index);
                _this.byIndex(_this.CONFIG.index);
            });

            //上一个按钮点击事件 (改变index)
            this.CONFIG.sliderPrev.click(function(){
                _this.getIndexMin()();
                _this.byIndex(_this.CONFIG.index);
                _this.sliderPrevBtn(_this.CONFIG.index);
            });

            //图标导航,点击事件
            this.CONFIG.icoNav.click(function(){
                _this.byIndexInto(_this.CONFIG.index, $(this).attr("data-src"));
            });

            //定义鼠标移入移出停止开始播放
            this.$ele.hover(
                function(){
                    _this.stop();
                },function(){
                    _this.play();
                }
            );

            //debugger

        },
        byIndex: function(index){

            this.titleNav(this.CONFIG.titleNav, index);
            this.icoNav(this.CONFIG.icoNav, index);
            this.numNav(this.CONFIG.numNav, index);
        },
        getIndex: function(){
            //索引号获取控制
            var _this = this;
            var currentIndex = function(){
                if(_this.CONFIG.index < (_this.settings.imgNum - 1)){
                    ++_this.CONFIG.index;
                }else{
                    _this.CONFIG.index = 0;
                }

                return _this.CONFIG.index;
            };

            return currentIndex;

        },
        getIndexMin: function(){
            //索引号获取控制,索引号递减
            var _this = this;
            var currentIndex = function(){
                if(_this.CONFIG.index > 0){
                    --_this.CONFIG.index;
                }else{
                    _this.CONFIG.index = (_this.settings.imgNum - 1);
                }

                return _this.CONFIG.index;
            };

            return currentIndex;

        },
        play: function(){
            //自动播放

            var _this = this;

            timer = setInterval(function(){

                _this.getIndex()(); //动态生成当前索引号的index的值

                //当前索引号传入以下方法执行多个显示效果
                _this.byIndex(_this.CONFIG.index);
                _this.slidernextBtn(_this.CONFIG.index);

            }, 2000);

        },
        stop: function(){
            //停止自动播放
            clearInterval(timer);
        },
        showOne: function(obj, index){
            //显示一个其他元素都隐藏不显示

            //让所有指定选择符元素群组的各个元素都隐藏
            for(var i=0; i<this.settings.imgNum; i++){
                $(obj[i]).removeClass("slider-selected");
            }

            //指定当前索引index的元素显示
            $(obj[index]).addClass("slider-selected");


        },
        sport: function(setw){
            //设置运动过渡效果

            this.CONFIG.sliderMain.animate({left: setw}, "slow");

        },
        sliderPrevBtn: function(index){
            //上一个按钮操作

            var setw = -(index * this.settings.width) + "px";

            //执行运动方法
            this.sport(setw);

        },
        slidernextBtn: function(index){
            //下一个按钮操作


            var setw = -(index * this.settings.width) + "px";

            //执行运动方法
            this.sport(setw);

        },
        titleNav: function(obj, index){
            this.showOne(obj, index); //显示当前图标
        },
        icoNav: function(obj, index){
            this.showOne(obj, index);
        },
        numNav: function(obj, index){
            this.showOne(obj, index);
        },
        byIndexInto: function(index, clickIndex){
            //参数说明: index 当前索引号,clickIndex 点击对象的索引号

            if(clickIndex > index){
                this.slidernextBtn(clickIndex);
                this.byIndex(clickIndex);
            }else{
                this.sliderPrevBtn(clickIndex);
                this.byIndex(clickIndex);
            }
        }

    };

    //定义一个插件并命名
    $.fn.playsee = function(option){
        var seesee = new Seesee(this, option);
        return seesee.initialize();
    }

})(jQuery, window, document);
html:

<div class="slider" id="lunbo1" style="position: relative">

    <!--图片列表-->
    <div class="slider-body" style="position: relative;">

        <ul class="slider-main" style="width: 1580px; left: 0px; position: absolute;">

            <li class="slider-panel ">
                <a href="1.html" target="_blank" title="">
                    <img src="../../../images/jd1/1.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel ">
                <a href="2.html" target="_blank" title="">
                    <img src="../../../images/jd1/2.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel ">
                <a href="3.html" target="_blank" title="">
                    <img src="../../../images/jd1/3.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel slider-panel-selected">
                <a href="4.html" target="_blank" title="">
                    <img src="../../../images/jd1/4.jpg" width="395" height="237"  alt="">
                </a>
            </li>

        </ul>


    </div>

    <!--圆点导航-->
    <div class="slider-nav">
        <ul>
            <li class="slider-item slider-selected" data-src="0"></li>
            <li class="slider-item" data-src="1"></li>
            <li class="slider-item" data-src="2"></li>
            <li class="slider-item" data-src="3"></li>
        </ul>
    </div>

    <!--数字显示-->
    <div class="num-nav">
        <ul>
            <b class="slider-item slider-selected">1</b>
            <b class="slider-item">2</b>
            <b class="slider-item">3</b>
            <b class="slider-item">4</b>

        </ul>
    </div>

    <!--标题-->
    <div class="title-nav">
        <ul>
            <li class="slider-item slider-selected">11111111</li>
            <li class="slider-item">222222222</li>
            <li class="slider-item">33333333333</li>
            <li class="slider-item">444444444444</li>
        </ul>
    </div>

    <!--左右箭头-->
    <div class="slider-page">
        <a href="javascript:void(0)" class="slider-prev">&lt;</a>
        <a href="javascript:void(0)" class="slider-next">&gt;</a>
    </div>


</div>

<div class="slider" id="lunbo2" style="position: relative">

    <!--图片列表-->
    <div class="slider-body" style="position: relative;">

        <ul class="slider-main" style="width: 1580px; left: 0px; position: absolute;">

            <li class="slider-panel ">
                <a href="1.html" target="_blank" title="">
                    <img src="../../../images/jd1/1.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel ">
                <a href="2.html" target="_blank" title="">
                    <img src="../../../images/jd1/2.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel ">
                <a href="3.html" target="_blank" title="">
                    <img src="../../../images/jd1/3.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel slider-panel-selected">
                <a href="4.html" target="_blank" title="">
                    <img src="../../../images/jd1/4.jpg" width="395" height="237"  alt="">
                </a>
            </li>

        </ul>


    </div>

    <!--圆点导航-->
    <div class="slider-nav">
        <ul>
            <li class="slider-item slider-selected" data-src="0"></li>
            <li class="slider-item" data-src="1"></li>
            <li class="slider-item" data-src="2"></li>
            <li class="slider-item" data-src="3"></li>
        </ul>
    </div>

    <!--数字显示-->
    <div class="num-nav">
        <ul>
            <b class="slider-item slider-selected">1</b>
            <b class="slider-item">2</b>
            <b class="slider-item">3</b>
            <b class="slider-item">4</b>

        </ul>
    </div>

    <!--标题-->
    <div class="title-nav">
        <ul>
            <li class="slider-item slider-selected">11111111如何齐家治国</li>
            <li class="slider-item">222222222科技人员可离岗创业  及时回应关切</li>
            <li class="slider-item">33333333333联想移动端表现不佳 CEO杨元庆被质疑不称职</li>
            <li class="slider-item">444444444444韩媒:金正恩妹妹或成联合国首个制裁对象</li>
        </ul>
    </div>
  <!--左右箭头-->
    <div class="slider-page">
        <a href="javascript:void(0)" class="slider-prev">&lt;</a>
        <a href="javascript:void(0)" class="slider-next">&gt;</a>
    </div>


</div>
js:

<script src="../lib/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.playsee.js"></script>
<script>
    $(function(){
        $("#lunbo1").playsee();
        $("#lunbo2").playsee();
    })
</script>
CSS:

body{
    margin: 0;
}
.slider{
    overflow: hidden;
    margin: 50px;
    padding: 0;
    width: 395px;
    height: 237px;
    background-color: #ccc;
}

.slider ul,.slider ul li{
    margin: 0;
    padding: 0;
}

.slider-panel-selected{
    display: block;
}
.slider-panel{
    float: left;
}

.slider-nav{
    overflow: hidden;
    position: absolute;
    right:10px;
    bottom: 20px;
    width: 100px;
    height: 15px;

}

.slider-nav .slider-item{
    display: block;
    margin-right: 5px;
    float: left;
    width: 15px;
    height: 15px;
    border-radius: 10px;
    background-color:#f4fcfe;
}

.slider-nav .slider-selected{
    background-color:#fd472b;
}

.title-nav{
    position: absolute;
    right:10px;
    top: 10px;

    width: 90%;
    height:20px;
    line-height: 20px;
    background-color: #f00;
}
.title-nav .slider-item{
    display: none;
}
.title-nav .slider-selected{
    display: block;
}

.num-nav{
    position: absolute;
    right:10px;
    top: 130px;
    width: 50px;
    height:50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50px;
    background-color: #f00;
}
.num-nav b{
    font-size: 20px;
}
.slider-page{
    position: absolute;

    top: 75px;
    width: 100%;
    height:50px;
    line-height: 50px;
    text-align: center;

}
.slider-page a{
    display: block;
    width: 50px;
    height: 50px;
    background-color: #8FA4F5;
}
.slider-page .slider-prev{
    float: left;

}

.slider-page .slider-next{
    float: right;
}

.num-nav .slider-item{
    display: none;
}

.slider-selected{
    display: block !important;
JavaScript 前端开发 索引
分享到
取消 提交回答
全部回答(1)
  • 保持可爱mmm
    2019-10-10 18:05:38
    jquery插件开发模式 jquery插件一般有三种开发方式: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 第一种$.extend()相对简单,一般很少能够独立开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍。第二种则是一般插件开发用到的方式,本文着重讲讲第二种。 插件开发 第二种插件开发方式一般是如下定义 $.fn.pluginName = function() { //your code here } 插件开发,我们一般运用面向对象的思维方式 例如定义一个对象 var Haorooms= function(el, opt) { this.$element = el, this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'none' }, this.options = $.extend({}, this.defaults, opt) } //定义haorooms的方法 haorooms.prototype = { changecss: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); } } $.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象,保留对象的默认值。 $.fn.myPlugin = function(options) { //创建haorooms的实体 var haorooms= new Haorooms(this, options); //调用其方法 return Haorooms.changecss(); } 调用这个插件直接如下就可以 $(function() { $('a').myPlugin({ 'color': '#2C9929', 'fontSize': '20px' }); })
    

    来源于网络,供您参考

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题