javascript - 暂停和播放 javascript slider 事件 onclick

Question

我正在完成网站编码并向登陆页面添加图像 slider 。我对 javascript 很陌生，所以我复制并粘贴了一个图像 slider 演示，并根据我的需要对其进行了一些调整。我有 4 张图像，每隔一段时间就会淡入下一张图像。我现在想做的是拥有它，这样当您单击任何图像时，自动播放幻灯片就会暂停，然后您可以单击继续。我一整天都在浏览论坛和教程，但我很迷失。任何帮助将不胜感激。谢谢。

HTML

 <ul id="slider">
  <li><img src="images/img1.png"/></li>
  <li><img src="images/img2.png"/></li>
  <li><img src="images/img3.png"/></li>
  <li><img src="images/img4.png"/></li>
</ul>

JavaScript

<script>
$(function () {
    var change_img_time = 5000;
    var transition_speed = 100;
    var simple_slideshow = $("#slider"),
        listItems = simple_slideshow.children('li'),
        listLen = listItems.length,
        i = 0,
        changeList = function () {
            listItems.eq(i).fadeOut(transition_speed, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(transition_speed);
            });
        };
    listItems.not(':first').hide();
    setInterval(changeList, change_img_time);
});
</script>

Answer 1

尝试

$(function () {


    var change_img_time = 5000;
    var transition_speed = 100;

    var simple_slideshow = $("#slider"),
        listItems = simple_slideshow.children('li'),
        listLen = listItems.length,
        i = 0,

        changeList = function () {

            listItems.eq(i).fadeOut(transition_speed, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(transition_speed);
            });

        };

    listItems.not(':first').hide();
    var timer = setInterval(changeList, change_img_time);
    listItems.click(function () {
        if (timer) {
            clearTimeout(timer);
            timer = undefined;
        } else {
            timer = setInterval(changeList, change_img_time);
        }
    })
});

演示:Fiddle