问题描述：
单个实例是正常的，但二个实例时鼠标放在第一个实例上去后不停止播放，还是继续自动滚动播放，而第二个实例鼠标放上去后正常停止播放，问题何在呢，麻烦大家给看看，另外大家给提点建议，看看结构能不能改进的地方，谢谢
插件：jquery.playsee.js
5
351/*
*
*插件: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("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 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：
-
-
-
-
1
2
3
4
-
-
-
-
1
2
3
4
js：
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;
}
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
你的插件中的timer 是个全局变量，所以实例多个会出错，改成局部变量就可以了，声明一个局部变量
var _this=this,timer=null;就可以了代码写的不错啊，小白学习了
如楼上所说,timer成全局变量了, timer改成this.timer就行了
围观学习
昨天仿写了个魅族论坛里的banner，需要的话可以发个给你，支持js模块化和普通模式加载