多個jQuery幻燈片實例

Question

我創建了一個非常簡單的jQuery幻燈片，但遇到問題時遇到了頁面上有兩個問題。我認爲通過在本地定義所有變量可以解決問題，但是我似乎無法找到解決方案。

現在第二個實例正常工作，但第一個實例沒有正常工作。它要麼激活第二個，要麼什麼也不做。

的jsfiddle：http://jsfiddle.net/3pkujpur/1/

HTML：

<div class="slideshow"> 
    <div class="navigator"> 
     <a class="prev">Prev</a> 
     <a class="next">Next</a> 
    </div> 
    <ul class="slider"> 
     <li class="active"> 
      <h2>Slider 1 Slide 1</h2> 
     </li> 
     <li> 
      <h2>Slider 1 Slide 2</h2> 
     </li> 
     <li> 
      <h2>Slider 1 Slide 3</h2> 
     </li> 
    </ul> 
</div> 

<div class="slideshow"> 
    <div class="navigator"> 
     <a class="prev">Prev</a> 
     <a class="next">Next</a> 
    </div> 
    <ul class="slider"> 
     <li class="active"> 
      <h2>Slider 2 Slide 1</h2> 
     </li> 
     <li> 
      <h2>Slider 2 Slide 2</h2> 
     </li> 
     <li> 
      <h2>Slider 2 Slide 3</h2> 
     </li> 
    </ul> 
</div> 

的jQuery：

(function($) { 

    $.fn.slideShow = function() { 
     return this.each(function() { 

      var $this = jQuery(this); 
      var $slider = $this.find('.slider'); 
      var $slides = $slider.children(); 
      var length = $slides.size(); 

      var $navigator = $this.find('.navigator'); 
      var $trigger = $navigator.children(); 
      var $prev = $trigger.filter('.prev'); 

      var index = 0; 

      slideTo = function (idx) { 
       $slides 
        .removeClass('active') 
        .eq(idx) 
        .queue(function(next){ 
         jQuery(this).addClass('active'); 
         next(); 
        }); 

       index = idx; 
      }; 

      $trigger.click(function() { 
       var idx = $slides.filter('.active').index(), 
        prevIdx = idx - 1 < 0 ? length - 1 : index - 1; 
        nextIdx = idx + 1 < length ? index + 1 : 0; 
       slideTo(jQuery(this)[0] === $prev[0] ? prevIdx : nextIdx); 
      }); 
     }); 

    }; 

})(jQuery); 

jQuery('.slideshow').slideShow(); 

Answer 1

你slideTo功能是在全球範圍內，因此被改變。要修復它只需添加var

var slideTo = function (idx) {