如何在点击按钮时启动此图像循环？

时间：2013-05-15 16:24:04

标签： javascript html function 

       <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）未定义。

感谢您的帮助！

3 个答案:

答案 0 :(得分：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方法符合您的意图。您的评论说您希望每2.5秒拨打slideit()，但您的呼叫分别使用100和1500毫秒，分别为.1和1.5秒。

答案 1 :(得分：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/

答案 2 :(得分：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/

相关问题
最新问题