Question

我有一个我无法弄清楚的错误，所以我在寻求帮助。我有一个简单的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时会改变该类。

Answer 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>

幻灯片崩溃

1 个答案: