Question

此幻灯片代码效果很好，但在第一次鼠标悬停时只运行一次;我应该如何修复它以使其在每次鼠标悬停时运行（完成后）？

function slideImages(slider){ // slider is the element
  var $active = $('.active', slider); // search for .active in this element
  var $next = ($('.active', slider).next().length > 0) ? $('.active', slider).next() : $('img:first', slider);
  $next.css('z-index',2);
  $active.css('z-index',1);
  $next.animate({left:0},"fast",function(){

          $next.addClass('active');
    });
}

$(document).ready(function(){

  $('.portfolio_slider').on('mouseover', function(){
    var _this = this; // save it for other context
    setInterval(function(){
        slideImages(_this);
    }, 400);
    $(this).off('mouseover');
  });
});

HTML

<div class="portfolio_slider" style="float:left"> 
    <a id="by2" href="works.html"><img class="active" src="1.jpg" width="100" height="170">
        <img src="2.jpg" width="100" height="170">
        <img src="3.jpg" width="100" height="170">
        <img src="5.jpg" width="100" height="170">
        <img src="6.jpg" width="100" height="170">
        <img src="1.jpg" width="100" height="170">
        <p class="MAIN_TEXT">main</p>
        <p class="small_TEXT">small</p>
    </a> 
</div>

Answer 1

为每个滑块指定一个唯一ID，然后尝试这样的

FIDDLE基于你到目前为止给我的任何东西。

var sliders = {};

function slideImages($slider) { // slider is the element
    var $active = $('.active', $slider); // search for .active in this element
    var last = $('.active', $slider).index() == sliders[$slider.id].max;
    $next = $('.active', $slider).next();
    if (last) {
        $next = $('img:first', $slider);
        $slider.find("img").first().addClass('active');
        $slider.on('mouseover', init);
        clearInterval(sliders[$slider.id].tId);
    }    
    $active.removeClass("active");
    $next.css('z-index', 2);
    $active.css('z-index', 1);
    $next.animate({
      left: 0
    }, "fast", function () {
        $next.addClass('active');
    });
}

function init() {
    var $this = $(this); // save it for other context
    sliders[$this.id] = {
        "max" :$this.find("img").length,
        "tId":setInterval(function () {
          slideImages($this);
        }, 400)
    };
    $this.off('mouseover');
}
$(function () {
    $('.portfolio_slider').on('mouseover', init);
});

使代码在每次鼠标悬停时运行

1 个答案: