jquery在悬停时暂停

Posted 2023-05-09

【中文标题】jquery在悬停时暂停

【英文标题】：jquery pause on hover

【发布时间】：2014-06-19 19:52:21

【问题描述】：

所以我使用下面的脚本来为滑动内容创建幻灯片。我想知道向此添加“悬停暂停”功能的最简单代码是什么。因此，当用户将鼠标指针聚焦在整个滑动 div 上时，它会暂停幻灯片放映并 - 一旦再次删除恢复？...

$(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));
        

    );

还有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-->

还有 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;

我的原始代码来自：http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php

【参考方案1】：

鼠标进入时，清除间隔

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

当鼠标离开时，重新开始间隔

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

工作fiddle

【讨论】：

我添加了该代码，但它似乎不起作用 - 我将添加上面的 html 和 css。

创建一个小提琴，这样可以更轻松地查看发生了什么jsfiddle.net

添加了上面的所有代码。有关更多信息，请参见此处：webchiefdesign.co.uk/blog/simple-jquery-slideshow/… 试图创建一个小提琴，但它没有工作，但它在我自己的页面上工作：\

我更新了我的答案，我有一个错字，第二组代码现在使用mouseleave 而不是mouseenter 还添加了一个指向工作小提琴的链接

还有没有办法让它“循环”而不是到达终点并倒退？？？我猜在循环模式下它不再需要删除左右箭头的功能......