Javascript 幻灯片可点击按钮

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 的 jQuery。

还有许多针对各种 DOM 库的预构建幻灯片插件 jQuery 有很多。

如果您要继续使用当前的代码，要在鼠标悬停时创建暂停，您首先需要创建一个变量并将 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，并且不需要那种 hack 来隐藏 JS。