mouseover/mouseleft 时的 JS 滑块

Question

您好，网站上的 JS 客户端滑块有问题。

我想在mouseover时停止它并在mouseleft时继续。我已经搜索并检查了代码，但我不知道为什么它仍然不起作用，有人可以帮助我吗？

$(function(){

  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 400); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);

  var rotating = true;
  var clientspeed = 0;
  var seeclients = setInterval(rotateClients, clientspeed);


  function rotateClients() {
    if(rotating != false) {
      var $first = $('#clients-list li:first');
      $first.animate({ 'margin-left': '-220px' }, 5000, "linear", function() {
        $first.remove().css({ 'margin-left': '0px' });
        $('#clients-list li:last').after($first);
      });
    }
  }
});


$(document).on({
    mouseover: function(){
      rotating = false; // turn off rotation when hovering
    },
    mouseleave: function(){
      rotating = true;
    }
  }, '#clients');

Answer 1

简单jQuery轮播

$(window).on("load", makeCarousel);

function makeCarousel() {

  var carousel = $('.carousel ul'),
      interval = $(carousel).parent().data("interval") * 1000,
      speed    = $(carousel).parent().data("speed") * 1000,
      count    = $(carousel).children().length,
      width    = $(carousel).find("img:first").width(),
      id, moveIt;
    
  $(carousel)
    .css({
      width: count * width,
      position: "relative",
      margin: 0,
      padding: 0,
      listStyle: "none"
    })
    .parent().css({ width: width, overflow: "hidden" })
    .animate({opacity: 1}, 250)
    .on("mouseover", function() { clearInterval(id) })
    .on("mouseout", function() { moveIt() })
    .find("li").css({ float: "left" })
    .find("img").css({ verticalAlign: "bottom" });
  
  (moveIt = function() {
    id = setInterval(function() {
      $(carousel).animate({left: -width}, speed, function() {
        $(this).css({left: 0});
        $(this).children(":last").after($(this).children(":first"));
      });
    }, interval + speed);
  })();

}

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

<div class="carousel" data-interval="1" data-speed="0.6" style="opacity:0">
  <ul>
    <li><a href="#"><img src='http://placehold.it/350x200/111111?text=First Slide'></a></li>
    <li><a href="#"><img src='http://placehold.it/350x200/444444?text=Second Slide'></a></li>
    <li><a href="#"><img src='http://placehold.it/350x200/777777?text=Third Slide'></a></li>
    <li><a href="#"><img src='http://placehold.it/350x200/aaaaaa?text=Fourth Slide'></a></li>
  </ul>
</div>

Answer 2

请看一下这个方法：

$(function() {

  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 400); // 140px width for each client item 
  $clientcarousel.css('width', clientwidth);

  var rotating = true;
  var clientspeed = 0;
  var seeclients = setInterval(rotateClients, clientspeed);


  function rotateClients() {
    if (rotating != false) {
      var $first = $('#clients-list li:first');
      $first.animate({
        'margin-left': '-220px'
      }, 5000, "linear", function() {
        $first.remove().css({
          'margin-left': '0px'
        });
        $('#clients-list li:last').after($first);
      });
    } else {
    $('#clients-list li').stop();
    }
  }

  $(document).on({
    mouseenter: function(){
      rotating = false; // turn off rotation when hovering
    },
    mouseleave: function(){
      rotating = true;
    }
  }, '.clients');

});

/*Logo carousel*/

.clients {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 20%;
}
.clients .clients-wrap {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 220px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  filter: grayscale(100%);
  opacity: 0.40;
}
.clients .clients-wrap ul li img:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  filter: grayscale(0%);
  opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="clients">
  <p></p>
  <div class="clients-wrap">
    <ul id="clients-list" class="clearfix">
      <li>
        <img src="http://iconshow.me/media/images/logo/brand-logo-icon/png/256/cocacola-256.png">
      </li>
      <li>
        <img src="img/logos/2.png">
      </li>
      <li>
        <img src="img/logos/3.png">
      </li>
      <li>
        <img src="img/logos/4.png">
      </li>
      <li>
        <img src="img/logos/5.png">
      </li>
      <li>
        <img src="img/logos/6.png">
      </li>
      <li>
        <img src="img/logos/7.png">
      </li>
      <li>
        <img src="img/logos/8.png">
      </li>
      <li>
        <img src="img/logos/9.png">
      </li>
      <li>
        <img src="img/logos/10.png">
      </li>
      <li>
        <img src="img/logos/11.png">
      </li>
      <li>
        <img src="img/logos/12.png">
      </li>
      <li>
        <img src="img/logos/13.png">
      </li>
      <li>
        <img src="img/logos/14.png">
      </li>
      <li>
        <img src="img/logos/15.png">
      </li>
    </ul>
  </div>
  <!-- @end .clients-wrap -->
</div>

mouseover/mouseleft 时的 JS 滑块

JS slider while mouseover/mouseleft

javascript

jquery

slider

mouseover

mouseevent