Javascript幻灯片点击按钮

我正在寻找一些帮助，我的JavaScript幻灯片，其中的代码是从互联网上的教程中使用的。我想基本做到这一点，当你将鼠标移到它上面时，图像就不会改变。另外，我想在幻灯片的底部有两个按钮，例如下面的图片。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>

在此先感谢，尼克。

来源

2011-06-07 Nick

嗯...我认为你所遵循的教程是在90年代写的，它几乎所有的东西都是错误的。 – 2011-06-07 19:31:11

'//如果浏览器不支持图像对象，退出.'哟，这是非常古老的。你应该考虑使用更新和更灵活的东西，也许[link]（http://jqueryfordesigners.com/jquery-infinite-carousel/）甚至[link]（http://colorpowered.com/colorbox/） - 我不认为你会让任何人为你写幻灯片。 – changokun 2011-06-07 19:54:07

除非您只是将其作为了解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()在您连接到图像鼠标悬停事件。您还需要附加鼠标事件才能再次拨打setTimeout()以重新开始幻灯片放映。也就是说，这是一种你真的应该使用setInterval()和clearInterval()而不是setTimeout()的情况。

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

来源

2011-06-07 19:58:09

感谢您的回复。我实际上需要一个网页设计项目的代码，而不是关于javascript的自学。非常感谢你的回答，但无用的代码，但我不知道如何实现你所做的任何建议 - 但没有多少，谢谢。 – Nick 2011-06-07 20:03:31

然后你可能会更好地使用预先构建的解决方案，比如提到的那些@changokun，或者使用像我链接的更现代的教程。 – 2011-06-07 20:19:08

好的，非常感谢老兄！ – Nick 2011-06-07 22:45:22

Javascript幻灯片点击按钮

回答

相关问题