先上代码:
;(function(){
var slider = {
$con : $('.slider-item'),
index : 0,
slide : function(index){
this.$con.eq(index).siblings().animate({
opacity : 0
},1600);
this.$con.eq(index).animate({
opacity : 1
},1600);
},
autoShow : function(){
this.index += 1;
if(this.index <= 3 - 1){
slider.slide(this.index);
}else{
this.index = 0;
slider.slide(this.index);
}
setInterval(this.autoShow,5000);
}
}
slider.autoShow();
})();
这是我随手写的一段slider代码。但注意这一段:
if(this.index <= 3 - 1){
slider.slide(this.index);
}else{
this.index = 0;
slider.slide(this.index);
}
中间slider.slide()
我本来想写成this.slide()
,但编译器提示this.slide() is undefined,我不太理解,望各位大大不吝赐教!
setTimeout(this.autoShow.bind(this),5000); // bind(this)
另外setInterval
改成setTimeout
,setInterval
会疯掉
你这种写法并不推荐,内部不要使用setInterval
,这样会开启多个计时器,用setTimeout
替代吧
//方法1,注意 bind是es5里面的,需要ie10及以上浏览器才支持
setTimeout(this.autoShow.bind(this), 5000);
//方法2,全部兼容,把this代入到闭包中
var self = this;
setTimeout(function(){
self.autoShow()
}, 5000);
//方法3,Arrow Function需要最新的chorme才支持的新语法
setTimeout(()=>this.autoShow(),5000);
<script>alert("111");</script>
错在你的定时器那一块setInterval(this.autoShow,5000)