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

查看：134
本文介绍了javascript - 写了一个jQuery面向对象轮播图插件，单个实例正常，但多个实例异常的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问 题

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

插件：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;
}

解决方案

你的插件中的timer 是个全局变量，所以实例多个会出错，改成局部变量就可以了，声明一个局部变量var _this=this,timer=null;就可以了

这篇关于javascript - 写了一个jQuery面向对象轮播图插件，单个实例正常，但多个实例异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆