Javascript 将暂停功能添加到滑块

我这里有一个非常好的滑块脚本，已经找到了在它下面放子弹的方法，但我只是想知道。。是否可以添加一些简单的线条，以便在鼠标悬停时图像暂停/保持

这是我现在的代码：

jQuery

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {

        $("#slideshow div:gt(0)").hide();

        var index;
        index = 0;
        var totalslides;
        totalslides = 2;

        var nextSlide = function () {
            $('#slideshow div').eq(index).fadeOut(1000);
            $('#nav' + index).toggleClass('navselected');
            index++;
            if (index > totalslides - 1) { index = 0; }
            $('#slideshow div').eq(index).fadeIn(3000);
            $('#nav' + index).toggleClass('navselected');
        }

    var nextSlideTimer = setInterval(nextSlide, 7000);

        function nav(selectedSlide) {
            clearInterval(nextSlideTimer);

            $('#slideshow div').eq(index).fadeOut(1000);
            $('#nav' + index).toggleClass('navselected');
            index = selectedSlide;
            $('#slideshow div').eq(index).fadeIn(1000);
            $('#nav' + index).toggleClass('navselected');

            nextSlideTimer = setInterval(nextSlide, 4000);
        }

        $("#nav0").click(function () { nav(0); });
        $("#nav1").click(function () { nav(1); });
    });



</script>

$（文档）.ready（函数（）{
$（“#幻灯片放映分区：gt（0）”）.hide（）；
var指数；
指数=0；
var总载玻片；
总载玻片数=2；
var nextSlide=函数（）{
$（'#幻灯片分割'）.eq（索引）.fadeOut（1000）；
$（'#nav'+index）.toggleClass（'navselected'）；
索引++；
如果（index>totalslides-1）{index=0；}
$（'#幻灯片分割'）.eq（索引）.fadeIn（3000）；
$（'#nav'+index）.toggleClass（'navselected'）；
}
var nextSlideTimer=setInterval（nextSlide，7000）；
功能导航（选择幻灯片）{
clearInterval（下一个滑动计时器）；
$（'#幻灯片分割'）.eq（索引）.fadeOut（1000）；
$（'#nav'+index）.toggleClass（'navselected'）；
索引=所选幻灯片；
$（'#幻灯片分割'）.eq（索引）.fadeIn（1000）；
$（'#nav'+index）.toggleClass（'navselected'）；
nextSlideTimer=setInterval（nextSlide，4000）；
}
$（“#nav0”）。单击（函数（）{nav（0）；}）；
$（“#nav1”）。单击（函数（）{nav（1）；}）；
});

CSS

<style>
#slideshow { position: relative; width: 960px; height: 300px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow div { position: absolute; top: 10px ; left: 10px; right: 10px; bottom: 10px; }  
#slideshow a {display: block;width:960px;height:300px; }    
#slideshow a:hover{background-position: center bottom;}

#slideshownav a.navselected{color:#eb910c;}
#slideshownav {text-align:center; padding-top:8px;padding-bottom:20px;}
#slideshownav a {padding-right:10px;color:#748090;font-size:50px; text-decoration: none; }
#slideshownav a:hover {cursor:pointer;}
</style>

#幻灯片放映{位置：相对；宽度：960px；高度：300px；填充：10px；方框阴影：020px rgba（0,0,0,0.4）；}
#幻灯片分割{位置：绝对；顶部：10px；左侧：10px；右侧：10px；底部：10px；}
#幻灯片放映{显示：块；宽度：960px；高度：300px；}
#幻灯片a:悬停{背景位置：中间-底部；}
#幻灯片下载a.navselected{color:#eb910c；}
#幻灯片向下{文本对齐：居中；顶部填充：8px；底部填充：20px；}
#幻灯片下载{右填充：10px；颜色：#748090；字体大小：50px；文本装饰：无；}
#幻灯片下载a:hover{cursor:pointer；}

HTML

<div id="slideshow">
    <div>IMAGE 1</div>
    <div>IMAGE 2</div>
</div>
<div id="slideshownav">
    <a id="nav0" class="navselected">&#176;</a>
    <a id="nav1">&#176;</a>
</div>

图1
图2
°
°

在底部附近的document ready功能中添加以下内容：

$('#slideshow').on('mouseover mouseleave', function( event ) {
  if ( event.type === 'mouseover') {
    // stop slideshow timer
    clearInterval(nextSlideTimer);
  } else {
    // add a shorter time delay
    nextSlideTimer = setInterval(nextSlide, 4000);
  }
});

---

在底部附近的document ready函数中添加以下内容：

$('#slideshow').on('mouseover mouseleave', function( event ) {
  if ( event.type === 'mouseover') {
    // stop slideshow timer
    clearInterval(nextSlideTimer);
  } else {
    // add a shorter time delay
    nextSlideTimer = setInterval(nextSlide, 4000);
  }
});

---

您可以使用

mouseover

和

mouseout

：

$('#slideshow').mouseover(function () {
    // Clear the interval.
    clearInterval(nextSlideTimer);
}).mouseout(function () {
    // Start it nextSlide again.
    nextSlideTimer = setInterval(nextSlide, 3000);
});

或者更好，您可以使用

mouseenter

和

mouseleave

（参见jQuery文档以获取演示）：

---

第二种方法更好，因为当您在父滑块的内部元素周围移动时，它不会触发太多事件。

您可以使用

mouseover

和

mouseout

：

$('#slideshow').mouseover(function () {
    // Clear the interval.
    clearInterval(nextSlideTimer);
}).mouseout(function () {
    // Start it nextSlide again.
    nextSlideTimer = setInterval(nextSlide, 3000);
});

或者更好，您可以使用

mouseenter

和

mouseleave

（参见jQuery文档以获取演示）：

---

第二种方法更好，因为当您在父滑块的内部元素周围移动时，它不会触发太多事件。

对不起，jQuery对我来说是hit&hope。我必须把这个放在最后一个}）的前面吗？是的，在下面

$（“#nav1”）。单击（函数（）{nav（1）；}）及其上方的
}）很好。谢谢。我不知道为什么，但你的不行，无论如何，谢谢。此外，这已经不重要了，因为上面那个来自Praveen的已经有了。所以我一直在帮忙。感谢bothMine，如果您使用的jQuery版本早于v1.7，那么它可能不起作用。对不起，jQuery对我来说是命中&希望。我必须把这个放在最后一个}）的前面吗？是的，在下面
$（“#nav1”）。单击（函数（）{nav（1）；}）及其上方的
}）很好。谢谢。我不知道为什么，但你的不行，无论如何，谢谢。此外，这已经不重要了，因为上面那个来自Praveen的已经有了。所以我一直在帮忙。感谢bothMine如果您使用的jQuery版本早于v1.7，那么它可能不起作用。谢谢你，伙计，但正如我刚才回复Mottie的那样。。jQuery对我来说是命中和希望。放在哪里，就在最后一个}）的前面？最后一个朋友。。。将其添加到上一个代码之前）。谢谢你，伙计！将其标记为helpfull。不，您是；）。还有一件事，你知道如何得到比°；哈哈。可能是CSS。当然<代码>内容：“&where；”
谢谢你，伙计，但正如我刚才回复莫蒂的那样。。jQuery对我来说是命中和希望。放在哪里，就在最后一个}）的前面？最后一个朋友。。。将其添加到上一个代码之前）。谢谢你，伙计！将其标记为helpfull。不，您是；）。还有一件事，你知道如何得到比°；哈哈。可能是CSS。当然<代码>内容：“&whatever；”