Question

我有这个代码适合我的目标，但它适用于单个幻灯片;使用多个幻灯片放映，无论我在哪里鼠标移动，它都会使所有幻灯片运行，具体取决于同一个类，但如果我尝试分配不同的类，那就太乱了：

function slideImages(){
      var $active = $('.portfolio_slider .active');
      var $next = ($('.portfolio_slider .active').next().length > 0) ? $('.portfolio_slider .active').next() : $('.portfolio_slider img:first');
      $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(){
        setInterval(slideImages, 400);
        $(this).off('mouseover');

    })
})

的CSS：

.portfolio_slider{position:relative; width:100px; height:250px; overflow:hidden;}
.portfolio_slider img{position:absolute;left:100px;}
.portfolio_slider img.active{left:0}

我对js-jquery很新...有什么帮助吗？

HTML：

<div class="portfolio_slider"> 
<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">

</div>

Answer 1

您应该将要使用的滑块传递给slideImages函数，然后仅使用其元素。

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

    });
});

具有相同脚本的多个幻灯片

1 个答案: