Question

今天，我想弄一个图像滑块，当光标在当前图像上时，我想暂停，这是可行的，但它会回到第一个图像，而不是保持其位置。当我使用按钮但悬停有问题时，效果很好。

带有按钮的JSFiddle：https://jsfiddle.net/w16c7os0/1/

带有悬停的JSFiddle：https://jsfiddle.net/w16c7os0/

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="main.js"></script>

<style>
    section {
        width: 100%;
        height: 100vh;
    }

    div {
        width: 80%;
        height: 80%;
        position: absolute;
        transform: translateX(-50%);
    }

    #box_1 { left: -150%; }
    #box_2 { left: 50%; }
    #box_3 { left: 150%; }
</style>

<section>
    <div id="box_1" style="background-color: aqua;"><input value="A"></div>
    <div id="box_2" style="background-color: blue;"><input value="B"></div>
    <div id="box_3" style="background-color: crimson;"><input value="C"></div>
</section>

<input id="btnPlay" type="button" value="Play">
<input id="btnPause" type="button" value="Pause">

jQuery：

$(document).ready(function() {
    var item_1 = $('#box_1');
    var item_2 = $('#box_2');
    var item_3 = $('#box_3');

    var $x;
    var hero_slideshow;
    var currSlide = $('section div:nth-child(2)').attr('id');
    var currSlideNum = currSlide.substr('4', '4');
    var status = 0;



    $('#btnPlay').click(function() { $x = 2; start(); });

    $('#btnPause').click(function() { pause(); });

    $x = 2;
    start();
    $('#'+currSlide).mouseenter(function() { pause(); });
    $('#'+currSlide).mouseleave(function() { $x = 2; start(); });



    function start() {
        if(status == 2) {
            status = 3;
            currSlideNum = currSlide.substr('4', '4');
            $x = currSlideNum;
        } else {
            status = 1;
        };

        hero_slideshow = setInterval(changeImage, 2000);
    };

    function pause() {
        status = 2;
        clearInterval(hero_slideshow);
    };

    function changeImage() {
        if($x > 2) {
            $('section div:nth-child('+$x+')').animate({ left: '-150%' }, 500);
            $x = 1;
            $('section div:nth-child('+$x+')').css('left', '150%');
            $('section div:nth-child('+$x+')').animate({ left: '50%' }, 500);
            currSlide = $('section div:nth-child('+$x+')').attr('id');
            $('section div:nth-child('+$x+') input').val(currSlide);
        } else {
            $('section div:nth-child('+$x+')').animate({ left: '-150%' }, 500);
            $x++;
            $('section div:nth-child('+$x+')').css('left', '150%');
            $('section div:nth-child('+$x+')').animate({ left: '50%' }, 500);
            currSlide = $('section div:nth-child('+$x+')').attr('id');
            $('section div:nth-child('+$x+') input').val(currSlide);
        };
    };
});

Answer 1

尝试一下

setInterval

Answer 2

请用以下代码替换mouseenter和mouseleave行。可以。

$('section div').mouseenter(function() {
   if(parseInt($(this).css('left')<0)) return;
   pause();
});
$('section div').mouseleave(function() { 
  if(parseInt($(this).css('left')<0)) return;
   $x = 2; start(); 
});

https://jsfiddle.net/2ywr3ns6/

图像滑块的播放/暂停可以在按钮上正常工作，但不能在悬停上

2 个答案: