鼠标悬停时的jQuery图像滑块并在鼠标悬停时重置答案

【问题标题】：jQuery images slider on mouseover and reset on mouseout鼠标悬停时的jQuery图像滑块并在鼠标悬停时重置
【发布时间】：2017-02-10 10:43:16
【问题描述】：

我的滑块有问题。

我想在鼠标悬停时启动滑块，当我出去时我想重置列表中第一个图像上的图像。

这是我的代码：

<div id="slider1" class="fadein">
            <img class="" src="images/rotator/1_1.jpg" alt="1">
            <img src="images/rotator/1_2.jpg" alt="2">
            <img src="images/rotator/1_3.jpg" alt="3">
          </div>

jQuery:

$(document).ready(function(){

    var change_img_time = 3000;
    var transition_speed = 300;

    var simple_slideshow = $('#slider1'),
        listItems = simple_slideshow.children('#slider1 img'),
        listLen = listItems.length,
        i = 0,
        intervalId // Generated id for the interval timer

        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();


    $('#slider1').on('mouseover', function () {
        changeList(); // Do this once immediately
        intervalId = setInterval(changeList, change_img_time);
    }).on('mouseout', function () {
        clearInterval(intervalId); // Stop slider
        listItems(':first').css('z-index', '9999');
    });;

});

拜托，有人可以帮忙吗？

【问题讨论】：

目前发生了什么？（一个 js fiddle 对测试/演示很有用）。此外，假设您打算将 changeList 函数声明设为私有，那么您在 intervalId 之后缺少逗号吗？否则，分号。

标签： jquery css html slider

【解决方案1】：

这是小提琴：

        var change_img_time = 3000;
        var transition_speed = 300;

        var simple_slideshow = $('#slider1'),
            listItems = simple_slideshow.children('.fadein img'),
            listLen = listItems.length,
            i = 0,
            intervalId, // Generated id for the interval timer

            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();


        $('#slider1').on('mouseover', function () {
            console.log(listItems);
            changeList(); // Do this once immediately
            intervalId = setInterval(changeList, change_img_time);
        }).on('mouseout', function () {
            clearInterval(intervalId); // Stop slider
            listItems(':first').css('z-index', '9999');
        });

.fadein {
    position: relative;
    /*overflow: hidden;*/

}

.fadein img {
    position: absolute;
    left: 0;
    top: 0;
}

.fadein img:nth-child(1) {
    z-index: 9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="slider1" class="fadein">
                <img class="" src="http://placekitten.com/210/130" alt="1">
                <img src="http://placekitten.com/200/300" alt="2">
                <img src="http://placekitten.com/200/300" alt="3">
              </div>

【讨论】：