我开始讨厌javascript中的对象。
每次出现错误并修复时,都会出现新错误,等等 你能看一下下面的代码并告诉我出了什么问题吗?
问题讯息:
“这个。图像未定义”
还有更多的错误
HTML文件
<div id="SlideShow" >
<img id="img" src="images/img.jpg" alt="" /><span id="desc"></span>
</div>
<script type="text/javascript">
meToo.Images = ['images/img.jpg','images/img2.jpg','images/img3.jpg','images/img4.jpg','images/img5.jpg'];
meToo.Titles = ['Pic1','pic2','Pic3','Pic4','Pic5'];
meToo.Play('img');
</script>
Javascript对象
var meToo = {
Images: [],
Titles: [],
counter: 0,
Play: function(ElemID){
var element = document.getElementById(ElemID);
var ImgLen = this.Images.length;
if(this.counter < ImgLen){
this.counter++;
element.src = this.Images[this.counter];
element.nextSibling.innerHTML = this.Titles[this.counter];
}else{
this.counter = 0;
}
setTimeout(this.Play, 1000);
}
};
请参阅Example
答案 0 :(得分:3)
See this question。否则setTimeout将this
设置为window对象。此外,计数器应在设置图像后递增,否则您将在数组边界外读取。
最后,当将计数器重置为0时,在循环重启之前会有一个额外的一秒延迟,因为该else
块中的图像没有被重置。您可能希望重写逻辑部分。
if(this.counter < ImgLen){
element.src = this.Images[this.counter];
element.nextSibling.innerHTML = this.Titles[this.counter];
this.counter++;
}else{
this.counter = 0;
}
var _this = this;
setTimeout(function() { _this.Play('img') }, 1000);
This是我要写的,以保持循环以一秒的间隔运行:
Play: function(ElemID) {
var element = document.getElementById(ElemID);
var ImgLen = this.Images.length;
if (this.counter == ImgLen) {
this.counter = 0;
}
element.src = this.Images[this.counter];
element.nextSibling.innerHTML = this.Titles[this.counter];
this.counter++;
var _this = this;
setTimeout(function() {
_this.Play('img')
}, 1000);
}
答案 1 :(得分:2)
if(this.counter < ImgLen)
错了。
这里会发生什么,当你运行
this.counter++;
该变量的值现在为ImgLen.length
javascript中的数组从0变为长度-1。所以当你运行时,你将超过数组的长度:
this.Images[this.counter];
并遇到错误。
此处的快速解决方法是更改为
if(this.counter < ImgLen -1)
如果您遇到其他问题,请发布确切的错误消息。 (在Chrome中运行并按F12(例如)以显示控制台,以便您可以查看错误)。
答案 2 :(得分:0)
在这里检查一下。它应该完美适合你。我已经把它作为一个单独的对象而且我正在检查是否包含meToo.Play在dom加载之前被调用它不会崩溃。所有其他错误上面提到的那些人也都在照顾。
<script>
var meToo = function(){
var Images = ['http://www.image-upload.net/di/WMPI/img.jpg','http://www.image-upload.net/di/HPUQ/img2.jpg','http://www.image-upload.net/di/WQ9J/img3.jpg','http://www.image-upload.net/di/GIM6/img4.jpg','http://www.image-upload.net/di/0738/img5.jpg'];
var Titles = ['Pic1','pic2','Pic3','Pic4','Pic5'];
var counter = 0;
return {
Play: function(ElemID) {
var element = document.getElementById(ElemID);
if(element){
var ImgLen = Images.length;
if(counter < ImgLen) {
element.src = Images[counter];
element.nextSibling.innerHTML = Titles[this.counter];
counter++;
} else {
counter = 0;
}
}
setTimeout(callmeToo, 1000);
}
}
}();
function callmeToo(){
meToo.Play('img');
}
callmeToo();
</script>