Javascript 幻灯片可点击按钮

Question

I'm looking for a little help with my javascript slideshow, for which the code was used from a tutorial on the internet. I want to basically make it so when you mouse over it stops the image from changing. Also, i'd like to have two buttons at the bottom of the slideshow such as the image below.

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>

Thanks in advance, Nick.

Answer 1

Unless you are just doing this as an exercise to learn more about JavaScript, a better option than a homegrown slideshow would probably be to use a DOM library. There's a pretty good tutorial on creating a slideshow with jQuery at SixRevisions.

There are also a number of pre-built slideshow plugins for the various DOM libraries jQuery has a bunch .

If you were to continue using your current code, to create the pause on mouseover you would first need to create a variable and store the result of setTimeout() in it.

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.

You could then use the timer variable to call clearTimeout() in a mouseover event you attach to the the image. You would also need to attach a mouseout event to call setTimeout() again to restart the slide show. That said, this is a situation you should really be using setInterval() and clearInterval() instead of setTimeout() .

You don't need the <!-- and //--> unless your expect you code to be running in ancient browsers like Netscape 1.0 and IE 2; all modern browsers understand JavaScript and don't need that hack to hide JS.