我遇到了一个无法解决的错误，所以我寻求帮助。我有一个简单的带有 JavaScript 的幻灯片代码，我知道错误的行，但我只是不知道为什么它崩溃。
这是完整的代码。
var step=1;
var whichimage=1;
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return;
document.images.slide.src=eval("image"+step+".src");
whichimage=step;
if (step==1)
{
changepic(step);
step++;
};
else if (step==2){
changepic(step);
step++;
};
else if (step==3) {
changepic(step);
step=1;
};
setTimeout("slideit()",1500);
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
function Pic1(){
if (!document.images)
return;
document.slide.src = image1.src;
step=1;
changepic(step);
}
function Pic2(){
if (!document.images)
return;
document.slide.src = image2.src;
step=2;
changepic(step);
}
function Pic3(){
if (!document.images)
return;
document.slide.src = image3.src;
step=3;
changepic(step);
}
function changepic (x){
if (x==1){
document.getElementById("temp1").setAttribute("class", "slideshowminithumb2");
document.getElementById("temp2").setAttribute("class", "slideshowminithumb");
document.getElementById("temp3").setAttribute("class", "slideshowminithumb");
}
if(x==2){
document.getElementById("temp2").setAttribute("class", "slideshowminithumb2");
document.getElementById("temp1").setAttribute("class", "slideshowminithumb");
document.getElementById("temp3").setAttribute("class", "slideshowminithumb");
}
if(x==3){
document.getElementById("temp3").setAttribute("class", "slideshowminithumb2");
document.getElementById("temp1").setAttribute("class", "slideshowminithumb");
document.getElementById("temp2").setAttribute("class", "slideshowminithumb");
}
}
我知道错误发生在这一行:
if (step==1)
{
changepic(step); /** Here! **/
step++;
};
我知道这一点，因为如果我删除该行，幻灯片脚本就可以工作，但我需要它才能工作，以便在步骤 1 时更改类。
最佳答案
这是一个jsfiddle:http://jsfiddle.net/Arlen22/MeWQM/
它在那里工作，这是一个 html 文档，它也适用于我在这里。
<!DOCTYPE>
<html>
<head>
<script>
var step=1;
var whichimage=1;
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return;
//changed this line based on Chrome, not sure if FF is different
document.images.namedItem("slide").src = document.images.namedItem("image"+step).src;
whichimage=step;
if (step==1)
{
changepic(step);
step++;
}
else if (step==2){
changepic(step);
step++;
}
else if (step==3) {
changepic(step);
step=1;
}
setTimeout("slideit();",1500);
}
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
function Pic1(){
if (!document.images)
return;
document.slide.src = image1.src;
step=1;
changepic(step);
}
function Pic2(){
if (!document.images)
return;
document.slide.src = image2.src;
step=2;
changepic(step);
}
function Pic3(){
if (!document.images)
return;
document.slide.src = image3.src;
step=3;
changepic(step);
}
function changepic (x){
if (x==1){
document.getElementById("temp1").setAttribute("class", "slideshowminithumb2");
document.getElementById("temp2").setAttribute("class", "slideshowminithumb");
document.getElementById("temp3").setAttribute("class", "slideshowminithumb");
}
if(x==2){
document.getElementById("temp1").setAttribute("class", "slideshowminithumb");
document.getElementById("temp2").setAttribute("class", "slideshowminithumb2");
document.getElementById("temp3").setAttribute("class", "slideshowminithumb");
}
if(x==3){
document.getElementById("temp1").setAttribute("class", "slideshowminithumb");
document.getElementById("temp2").setAttribute("class", "slideshowminithumb");
document.getElementById("temp3").setAttribute("class", "slideshowminithumb2");
}
}
</script>
<style>
#slideshowminithumb {
display:none;
}
#slideshowminithumb2 {
display:none;
}
</style>
</head>
<body>
<a href="javascript:slideit();">start</a>
<img id="slide" src=""/>
<div id="temp1">
<img id="image1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/%22Colourfull_flower%22.JPG/640px-%22Colourfull_flower%22.JPG" />
</div>
<div id="temp2">
<img id="image2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/%22Imperfection_in_perfect_beauty%22_%285113314692%29.jpg/640px-%22Imperfection_in_perfect_beauty%22_%285113314692%29.jpg" />
</div>
<div id="temp3">
<img id="image3" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/%22Pink_Nerium%22.JPG/640px-%22Pink_Nerium%22.JPG" />
</div>
</body>
</html>
关于javascript - 幻灯片崩溃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15413091/