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

Question

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

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

<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

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

我添加的部分：

$('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 中添加了这两个按钮并修改了 prev/next 导航点击功能。好好看看。这是 a link to your complete code 和我的插件。

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

How to make slideshow pause on mouse over and add tabs with progress of slide and fix timeout()

html

javascript

css

jquery

slideshow