Question

我正在寻找我的javascript幻灯片的一些帮助，其代码是从互联网上的教程中使用的。我想基本上这样做，当你将鼠标悬停在它上面时会阻止图像变化。此外，我想在幻灯片的底部有两个按钮，如下图所示。

http://imageshack.us/photo/my-images/841/slideshowexample.jpg/

    <img src="/wp-content/themes/twentyten/images/slide1.jpg" name="slide" />
<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("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 5 seconds
setTimeout("slideit()",5000)
}
slideit()
//--></div></script>

提前致谢，尼克。

Answer 1

除非您只是将此作为练习以了解有关JavaScript的更多信息，否则比本土幻灯片更好的选择可能是使用DOM库。有关在SixRevisions创建slideshow with jQuery的非常好的教程。

还有一些用于各种DOM库jQuery has a bunch的预构建幻灯片插件。

如果您要继续使用当前代码，要在鼠标悬停时创建暂停，您首先需要创建一个变量并将setTimeout()的结果存储在其中。

var timer;
timer = setTimeout(slideIt, 5000);  // note I just passed the function name instead
                                    // of quoting an invocation.  Using "slide()"
                                    // creates an unnecessary eval() call.

然后，您可以使用timer变量在附加到图片的鼠标悬停事件中调用clearTimeout()。您还需要附加一个mouseout事件才能再次调用setTimeout()以重新启动幻灯片放映。也就是说，这应该是您应该使用setInterval()和clearInterval()代替setTimeout()的情况。

除非您希望代码在Netscape 1.0和IE 2等古老浏览器中运行，否则您不需要;所有现代浏览器都能理解JavaScript，并且不需要黑客来隐藏JS。

Javascript幻灯片可点击按钮

1 个答案: