jquery 在悬停时暂停 [英] jquery pause on hover

问题描述

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

$(document).ready(function() {var currentPosition = 0;var 幻灯片宽度 = 500;var 幻灯片 = $('.slide');var numberOfSlides = slides.length;var slideShowInterval;无功速度 = 3000;//分配一个定时器，让它定期运行slideShowInterval = setInterval(changePosition, speed);slides.wrapAll('<div id="slidesHolder"></div>')幻灯片.css({ '浮动' : '左' });//设置#slidesHolder宽度等于所有幻灯片的总宽度$('#slidesHolder').css('width', slideWidth * numberOfSlides);$('#幻灯片').prepend('<span class="nav" id="leftNav">向左移动</span>').append('<span class="nav" id="rightNav">向右移动</span>');管理导航(当前位置)；//告诉按钮点击时做什么$('.nav').bind('click', function() {//确定新位置currentPosition = ($(this).attr('id')=='rightNav')?currentPosition+1 : currentPosition-1;//隐藏/显示控件管理导航(当前位置)；clearInterval(slideShowInterval);slideShowInterval = setInterval(changePosition, speed);移动滑动()；});功能管理导航(位置){//如果位置是第一张幻灯片，则隐藏左箭头if(position==0){ $('#leftNav').hide() }else { $('#leftNav').show() }//隐藏向右箭头是幻灯片位置是最后一张幻灯片if(position==numberOfSlides-1){ $('#rightNav').hide() }else { $('#rightNav').show() }}/*changePosition:当幻灯片被移动时调用计时器而不是点击下一个或上一个按钮时*/函数更改位置(){if(currentPosition == numberOfSlides - 1) {当前位置 = 0;管理导航(当前位置)；} 别的 {当前位置++；管理导航(当前位置)；}移动滑动()；}//moveSlide: 这个函数移动幻灯片函数移动滑动(){$('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});}});

和 html...

 
<div id="slideshowWindow"><div class="slide"><img src="slide1.jpg"/><div class="slideText"><h2 class="slideTitle">幻灯片 1</h2><p class="slideDes">Lorem ipsum dolor 坐 amet，consectetur adipisicing elit, sed do eiusmod temporincididunt ut laboure et dolore magna aliqua.</p><p class="slideLink"><a href="#">点击这里</a></p></div><!--/slideText--></div><!--/slide--><div class="slide"><img src="slide2.jpg"/><div class="slideText"><h2 class="slideTitle">幻灯片 2</h2><p class="slideDes">Lorem ipsum dolor 坐 amet，consectetur adipisicing elit, sed do eiusmod temporincididunt ut laboure et dolore magna aliqua.</p><p class="slideLink"><a href="#">点击这里</a></p></div><!--/slideText--></div><!--/slide--><div class="slide"><img src="slide3.jpg"/><div class="slideText"><h2 class="slideTitle">幻灯片 3</h2><p class="slideDes">Lorem ipsum dolor 坐 amet，consectetur adipisicing elit, sed do eiusmod temporincididunt ut Labore et dolore magna aliqua.</p><p class="slideLink"><a href="#">点击这里</a></p></div><!--/slideText--></div><!--/slide--></div><!--/slideshowWindow--></div><!--/slideshow-->

和CSS...

 #slideshow #slideshowWindow {宽度:500px；高度:257px；保证金:0;填充:0;位置:相对；溢出:隐藏；}#slideshow #slideshowWindow .slide {保证金:0;填充:0;宽度:500px；高度:257px；位置:相对；}#slideshow #slideshowWindow .slide .slideText {位置:绝对；顶部:130px；左:0px;宽度:100%；高度:130px；背景图像:网址(greyBg.png)；背景重复:重复；保证金:0;填充:0;颜色:#ffffff;字体系列:Myriad Pro、Arial、Helvetica、sans-serif；}#slideshow #slideshowWindow .slide .slideText a:link,#slideshow #slideshowWindow .slide .slideText a:visited {颜色:#ffffff;文字装饰:无；}#slideshow #slideshowWindow .slide .slideText h2,#slideshow #slideshowWindow .slide .slideText p {边距:10px 0 0 10px;填充:0;}

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

解决方案

鼠标进入时，清除间隔

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

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

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

工作 fiddle

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

解决方案

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

这篇关于jquery 在悬停时暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！