-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

你的不工作的原因是你从未删除过启动它的 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 回答
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

确保您没有在包装函数中定义函数 slideit()。

//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);
    }
}
var button = document.getElementById("YourButtonID");
button.addEventListener("click", slideit);

您需要命名的图像标签slide，因为您的 javascript 使用该属性来定位要更新的图像标签document.images.slide.src=eval("imagevis"+step+".src");。

还要确保你的setTimeout方法有你想要的时间。您的评论说您想slideit()每 2.5 秒打一次电话，但您的电话使用 100 和 1500 毫秒，分别为 0.1 和 1.5 秒。

于 2013-05-15T16:37:20.537 回答