Question

这是我用于滑块

的代码

a = ["apples", "bananas", "cucumbers", "bananas"]

print list(set(a))

我尝试创建一个函数，在悬停时使幻灯片显示更慢，并恢复正常，为什么光标不在其上。这是我的代码。

    jQuery(document).ready(function ($) {

    setInterval(function () {
        moveRight();
    }, 1000);

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

    $('a.control_next').click(function () {
        moveRight();
    });

});

我能够让滑块变慢，但是mouseout或mouseleave（尝试过两者）都不起作用，我不知道还能做什么。

如何在悬停时停止滑块并在鼠标关闭时使滑块移动？

Answer 1

请尝试以下代码。

  	

jQuery(document).ready(function ($) {
    		var slidetime = 500;	
         var t;
        $('#slider li').on('mouseout',function(){
          slidetime = 500;
          clearInterval(t);
          startAnimation();
        }); 
    	  $('#slider li').on('mouseenter',function(){
          //slidetime = 1000; if want to make it slower uncomment it
          clearInterval(t);
         //startAnimation(); if want to make it slower uncomment it
        });
        function startAnimation(){
        	 t = setInterval(function () {
            moveRight();
           }, slidetime);
        }
        startAnimation();
      
        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
            }, slidetime, function () {
                $('#slider ul li:last-child').prependTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };

        function moveRight() {
            $('#slider ul').animate({
                left: - slideWidth
            }, slidetime, function () {
                $('#slider ul li:first-child').appendTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };

    });

    li{
      width:100px;
      height:100px;
      float:left;
      display:block;
      }
      ul:nth-child(even){
        background:red;
       }
      ul:nth-child(odd){
        background:black;
        color:red;
      }
      ul{
        display:inline-flex;
      }
      #slider{
        width:100px;
        overflow:hidden;
        }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="slider">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    </ul>
    </div>

这是JSfiddle Link

Answer 2

您的代码的一个明显问题是mouseout函数，它会重复setInterval。请注意，如果您希望它停止运行，您需要调用clearInterval()“取消注册”该功能...

回答你的问题

如何在悬停时停止滑块并在鼠标关闭时使滑块移动？

您可以尝试这样的事情：

var myVar;  // rename it to something makes sense to you

$('#slider').mouseover(function(){
    clearInterval(myVar);
});

$('#slider').mouseout(function (){
    myVar = setInterval(function(){
        moveRight();
    }, 1000);
});

查看clearInterval函数here。

Answer 3

在此之前，您应该将setInterval添加到变量中，然后在再次调用相同的函数之前，可以使用clearInterval()清除它。我猜你应该把时间作为特定函数的参数：

jQuery(document).ready(function ($) {
   var time, 
       callRight = function(time){
          time = setInterval(function () {
              moveRight(time);
          }, time);
       };

       callRight(200); // <----call it here

       // other code as is

});

现在这些是您应该使用的更改：

function moveRight(time) {// <----pass the duration here.
  $('#slider ul').stop(true, true).animate({
    left: -slideWidth
  }, time, function() {// <----add the duration here.
    $('#slider ul li:first-child').appendTo('#slider ul');
    $('#slider ul').css('left', '');
  });
};

function moveNot(time) { // <----pass the duration here.
  $('#slider ul').stop(true, true).animate({
    left: -slideWidth
  }, time, function() { // <----add the duration here.
    $('#slider ul li:first-child').appendTo('#slider ul');
    $('#slider ul').css('left', '');
  });
};

$('#slider').on('mouseenter mouseleave', function(e) {
  if(e.type === 'mouseenter' && time){
     clearInterval(time); 
     moveNot(20000);
  } else {
     callRight(200);
  }
});

Answer 4

改为使用hover代替鼠标悬停和 mouseout

$('#slider').hover(function(){
    moveNot()
    },function () {
        setInterval(function(){
            moveRight()
    }, 1000)
});

如何在mouseout时停止mouseenter功能

4 个答案: