1

よくわからないエラーが発生したので、助けを求めています。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でクラスが変更されるように機能する必要があります。

4

1 に答える 1

0

ここに 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>
于 2013-03-14T22:21:33.547 に答える