Question

我在滑块上遇到了问题。

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

这是我的代码：

<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');
    });;

});

拜托，有人可以帮忙吗？

Answer 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>

鼠标悬停时jQuery图像滑块并在mouseout上重置

1 个答案: