jquery pause on hover

问题

So I am using the following script to create a slideshow for sliding content. I am wondering what is the simplest code to add 'pause on hover' functionality to this. So that when a user focuses his mouse pointer on the whole sliding div it will pause the slideshow and - once removed resume again?...

$(document).ready(function() {

        var currentPosition = 0;
        var slideWidth = 500;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        var slideShowInterval;
        var speed = 3000;

        //Assign a timer, so it will run periodically
        slideShowInterval = setInterval(changePosition, speed);

        slides.wrapAll('<div id="slidesHolder"></div>')

        slides.css({ 'float' : 'left' });

        //set #slidesHolder width equal to the total width of all the slides
        $('#slidesHolder').css('width', slideWidth * numberOfSlides);

        $('#slideshow')
            .prepend('<span class="nav" id="leftNav">Move Left</span>')
            .append('<span class="nav" id="rightNav">Move Right</span>');

        manageNav(currentPosition);

        //tell the buttons what to do when clicked
        $('.nav').bind('click', function() {

            //determine new position
            currentPosition = ($(this).attr('id')=='rightNav')
            ? currentPosition+1 : currentPosition-1;

            //hide/show controls
            manageNav(currentPosition);
            clearInterval(slideShowInterval);
            slideShowInterval = setInterval(changePosition, speed);
            moveSlide();
        });

        function manageNav(position) {
            //hide left arrow if position is first slide
            if(position==0){ $('#leftNav').hide() }
            else { $('#leftNav').show() }
            //hide right arrow is slide position is last slide
            if(position==numberOfSlides-1){ $('#rightNav').hide() }
            else { $('#rightNav').show() }
        }


        /*changePosition: this is called when the slide is moved by the 
        timer and NOT when the next or previous buttons are clicked*/
        function changePosition() {
            if(currentPosition == numberOfSlides - 1) {
                currentPosition = 0;
                manageNav(currentPosition);
            } else {
                currentPosition++;
                manageNav(currentPosition);
            }
            moveSlide();
        }


        //moveSlide: this function moves the slide 
        function moveSlide() {
                $('#slidesHolder')
                  .animate({'marginLeft' : slideWidth*(-currentPosition)});
        }

    });

and the html...

    <div id="slideshow">
     <div id="slideshowWindow">
        <div class="slide">
                 <img src="slide1.jpg" />
                 <div class="slideText">
                     <h2 class="slideTitle">Slide 1</h2>
                     <p class="slideDes">Lorem ipsum dolor sit amet, 
                     consectetur adipisicing elit, sed do eiusmod tempor 
                     incididunt ut labore et dolore magna aliqua.</p>
                     <p class="slideLink"><a href="#">click here</a></p>
                 </div><!--/slideText-->
            </div><!--/slide-->
        <div class="slide">
             <img src="slide2.jpg" />
                     <div class="slideText">
                     <h2 class="slideTitle">Slide 2</h2>
                     <p class="slideDes">Lorem ipsum dolor sit amet, 
                     consectetur adipisicing elit, sed do eiusmod tempor 
                     incididunt ut labore et dolore magna aliqua.</p>
                     <p class="slideLink"><a href="#">click here</a></p>
                 </div><!--/slideText-->
        </div><!--/slide-->
        <div class="slide">
             <img src="slide3.jpg" />
                     <div class="slideText">
                     <h2 class="slideTitle">Slide 3</h2>
                     <p class="slideDes">Lorem ipsum dolor sit amet, 
                     consectetur adipisicing elit, sed do eiusmod tempor 
                     incididunt ut labore et dolore magna aliqua.</p>
                     <p class="slideLink"><a href="#">click here</a></p>
                 </div><!--/slideText-->
        </div><!--/slide-->
     </div><!--/slideshowWindow-->
</div><!--/slideshow-->

and the css...

    #slideshow #slideshowWindow {
    width:500px;
    height:257px;
    margin:0;
    padding:0;
    position:relative;
    overflow:hidden;
}

#slideshow #slideshowWindow .slide {
    margin:0;
    padding:0;
    width:500px; 
    height:257px;
    position:relative;
}

#slideshow #slideshowWindow .slide .slideText {
    position:absolute;
    top:130px;
    left:0px;
    width:100%;
    height:130px;
    background-image:url(greyBg.png);
    background-repeat:repeat;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}

#slideshow #slideshowWindow .slide .slideText a:link, 
#slideshow #slideshowWindow .slide .slideText a:visited {
    color:#ffffff;
    text-decoration:none;
}

#slideshow #slideshowWindow .slide .slideText h2, 
#slideshow #slideshowWindow .slide .slideText p {
    margin:10px 0 0 10px;
    padding:0;
}

I got the origanal code from: http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php

回答1:

When the mouse enters, clear the interval

$('#slideshow').mouseenter(function(){
  clearInterval(slideShowInterval);
});

And when the mouse leaves, re-start the interval

$('#slideshow').mouseleave(function(){
  slideShowInterval = setInterval(changePosition, speed);
});

working fiddle

来源：https://stackoverflow.com/questions/23439830/jquery-pause-on-hover