javascript - 如何使幻灯片在鼠标悬停时暂停并添加带有幻灯片进度的选项卡并修复超时()

Question

您好，我正在尝试修复我的内容幻灯片。我正在尝试添加带有上面简单进度条的选项卡的功能，例如 vodafone.co.uk，并添加播放/暂停功能。我还试图弄清楚如何在单击 slider 不播放的下一个或上一个按钮时清除 setInterval() 时解决此问题。

无论如何，我会在下面留下我的代码，希望有人能帮助我，这是我在这个社区上的第一篇文章!期待参与其中!

<div id="slider">
  <a onclick="return false" class="control_next">></a>
  <a onclick="return false" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>  
</div>
<script>
jQuery(document).ready(function ($) {
    timer = setInterval(function () {
        moveRight();
    }, 4000);

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    clearInterval(timer);
    });

    $('a.control_next').click(function () {
        moveRight();
    clearInterval(timer);
    });

    return timer;

});    
</script>

您还可以找到我们的 jsFiddle here

提前感谢您的帮助!

Answer 1

您的 slider 代码可以优化为最少的代码和更好的性能。我从你的问题中了解到，你想在加载时自动播放轮播，单击上一个/下一个按钮停止自动播放，并选择通过播放按钮再次开始自动播放。这就是我在这里所做的以及停止选项。随意编辑和相应地调整代码。

我添加的部分:

$('a.control_play').click(function () {
    $('a.control_play').hide();
    $('a.control_pause').show();
    moveRight();
    timer = setInterval(function () {
        moveRight();
    }, 4000);
});

$('a.control_pause').click(function () {
    clearInterval(timer);
    $('a.control_play').show();
    $('a.control_pause').hide()
});

我还在您的 HTML 中添加了这两个按钮，并修改了上一个/下一个导航点击功能。好好看看。这是 a link to your complete code加上我的附加物。