多個幻燈片相同的腳本

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

    }); 
});