-2 
       <p align="center">

<button onclick="slideit()">Run the loop</button>

   <!-- Start Weather Image Loop -->

<img src="firstcar2.gif" name="slide" width="900" height="500" />

<script type="text/javascript">
<!--

var imagevis1=new Image()
imagevis1.src="http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg"
var imagevis2=new Image()
imagevis2.src="http://www.ssec.wisc.edu/data/us_comp/big/image2.jpg"
var imagevis3=new Image()
imagevis3.src="http://www.ssec.wisc.edu/data/us_comp/big/image3.jpg"
var imagevis4=new Image()
imagevis4.src="http://www.ssec.wisc.edu/data/us_comp/big/image4.jpg"
var imagevis5=new Image()
imagevis5.src="http://www.ssec.wisc.edu/data/us_comp/big/image5.jpg"
var imagevis6=new Image()
imagevis6.src="http://www.ssec.wisc.edu/data/us_comp/big/image6.jpg"
var imagevis7=new Image()
imagevis7.src="http://www.ssec.wisc.edu/data/us_comp/big/image7.jpg"
var imagevis8=new Image()
imagevis8.src="http://www.ssec.wisc.edu/data/us_comp/big/image8.jpg"
var imagevis9=new Image()
imagevis9.src="http://www.ssec.wisc.edu/data/us_comp/big/image9.jpg"
var imagevis10=new Image()
imagevis10.src="http://www.ssec.wisc.edu/data/us_comp/big/image10.jpg"
var imagevis11=new Image()
imagevis11.src="http://www.ssec.wisc.edu/data/us_comp/big/image11.jpg"
var imagevis12=new Image()
imagevis12.src="http://www.ssec.wisc.edu/data/us_comp/big/image12.jpg"
var imagevis13=new Image()
imagevis13.src="http://www.ssec.wisc.edu/data/us_comp/big/image13.jpg"
var imagevis14=new Image()
imagevis14.src="http://www.ssec.wisc.edu/data/us_comp/big/image14.jpg"
var imagevis15=new Image()
imagevis15.src="http://www.ssec.wisc.edu/data/us_comp/big/image15.jpg"
var imagevis16=new Image()
imagevis16.src="http://www.ssec.wisc.edu/data/us_comp/big/image16.jpg"
var imagevis17=new Image()
imagevis17.src="http://www.ssec.wisc.edu/data/us_comp/big/image17.jpg"
var imagevis18=new Image()
imagevis18.src="http://www.ssec.wisc.edu/data/us_comp/big/image18.jpg"
var imagevis19=new Image()
imagevis19.src="http://www.ssec.wisc.edu/data/us_comp/big/image19.jpg"
var imagevis20=new Image()
imagevis20.src="http://www.ssec.wisc.edu/data/us_comp/big/image20.jpg"
var imagevis21=new Image()
imagevis21.src="http://www.ssec.wisc.edu/data/us_comp/big/image21.jpg"
var imagevis22=new Image()
imagevis22.src="http://www.ssec.wisc.edu/data/us_comp/big/image22.jpg"
var imagevis23=new Image()
imagevis23.src="http://www.ssec.wisc.edu/data/us_comp/big/image23.jpg"
var imagevis24=new Image()
imagevis24.src="http://www.ssec.wisc.edu/data/us_comp/big/image24.jpg"
var imagevis25=new Image()
imagevis25.src="http://www.ssec.wisc.edu/data/us_comp/big/image24.jpg"

//-->
</script>
<script>
<!--

//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("imagevis"+step+".src")
if (step<25)
step++
else
step=1
//call function "slideit()" every 2.5 seconds

if (step<25)
{
setTimeout("slideit()",100)
}
else
{
setTimeout("slideit()",1500)
}
}
slideit()

//-->
</script>
<!-- End Weather Image Loop -->

   </p>

ボタンをクリックしてこのスクリプトをロードしようとしていますが、下のスクリプトを関数に配置してボタンでロードすると、ループが開始されません。何らかの理由で、slideit()が定義されていない、または最初のイメージ ( imagevis1) が定義されていないと表示されることがあります。

ご協力ありがとうございました！

4

3 に答える 3

0

アニメーションか何かを書こうとしていると思います。

html

<img src='http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg' id="weatherImg" width="400" />
<input type="button" id="animate" onclick="animate()" value="tiempo" />

JavaScript

currImg=0;
images = [
"http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image2.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image3.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image4.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image5.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image6.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image7.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image8.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image9.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image10.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image11.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image12.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image13.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image14.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image15.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image16.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image17.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image18.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image19.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image20.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image21.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image22.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image23.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image24.jpg"
//,"http://www.ssec.wisc.edu/data/us_comp/big/image25.jpg"
];
aniClock = 0;
animate = function(){
clearTimeout(aniClock);
    if (typeof images[currImg] == "undefined"){
        //alert('ho');
        //return false;
        currImg = 0;
    }
    document.getElementById("weatherImg").src = images[currImg];
    currImg++;
    aniClock = setTimeout(function(){animate();},300);
}

例

http://jsfiddle.net/chepe263/bVye6/

于 2013-05-15T16:46:27.083 に答える
0

あなたが機能していない理由は、それを開始する slide() 呼び出しを削除したことがないという事実です。それを削除する必要があり、コードはボタンのクリックで機能します。

    setTimeout("slideit()",1500)
    }
}
slideit()  <-- REMOVE THIS LINE

//-->
</script>
<!-- End Weather Image Loop -->

しかし、コードには他の問題があります。私はこれをかなり簡単に書きましたが、これはあなたが持っているものより少し優れています. ロードが間に合わない場合、プリロードは別の方法で実行される可能性があります。

HTML :

<img src="" id="slideshow" />
<button id="btn">Animate</button>

JavaScript:

(function () {
    var srcStart = "http://www.ssec.wisc.edu/data/us_comp/big/image",
        srcEnd = ".jpg",
        start = 1,
        end = 24,
        current = start,
        shortDelay = 100,
        longDelay = 1500,
        elem = document.getElementById("slideshow"),
        btn = document.getElementById("btn"),
        isPreload = true;

    function next() {
        var delay = shortDelay;        
        elem.src = srcStart + current + srcEnd;
        current++;

        if(current!==end) {
          var img = new Image();
          img.src = srcStart + (current+1) + srcEnd;
        }
        if(current>end) {
            current = start;
            delay = longDelay;
        }
        window.setTimeout(next,delay);
    }

    btn.onclick = next;
})();

例：

http://jsfiddle.net/L7qUY/

于 2013-05-15T16:44:00.110 に答える