jquery简单的图像幻灯片在网站上的多个幻灯片

Question

从这里的解决方案（https://stackoverflow.com/a/18493684/1969917）我用来在网站上显示图像幻灯片。现在客户希望在同一个网站上有另一张图片幻灯片，但这会起作用。我用另一个ID尝试它并复制JavaScript。但第二个是行不通的。只有第一个滑块可以正常工作。

JS：

$(function() { 

    /* SET PARAMETERS */ 
    var change_img_time  = 5000; 
    var transition_speed = 100; 

    var simple_slideshow = $("#exampleSlider"), 
     listItems   = simple_slideshow.children('li'), 
     listLen    = listItems.length, 
     i     = 0, 

    changeList = function() { 

     listItems.eq(i).fadeOut(transition_speed, function() { 
      i += 1; 
      if (i === listLen) { 
       i = 0; 
      } 
      listItems.eq(i).fadeIn(transition_speed); 
     }); 

    }; 

    listItems.not(':first').hide(); 
    setInterval(changeList, change_img_time); 

}); 

HTML：

<ul id="exampleSlider"> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
</ul> 

如何我必须在JavaScript代码来改变与在网站上不止一个幻灯片工作？

Answer 1

你可以把你的代码放到一个非常简单的jQuery插件如下：

$.fn.simpleSlides = function() { 

    /* SET PARAMETERS */ 
    var change_img_time = 1500; 
    var transition_speed = 300; 
    return this.each(function() { 
     var simple_slideshow = $(this), 
      listItems = simple_slideshow.children('li'), 
      listLen = listItems.length, 
      i = 0, 
      changeList = function() { 
       listItems.eq(i).fadeOut(transition_speed, function() { 
        i += 1; 
        if (i === listLen) { 
         i = 0; 
        } 
        listItems.eq(i).fadeIn(transition_speed); 
       }); 
      }; 
     listItems.not(':first').hide(); 
     setInterval(changeList, change_img_time); 
    }); 
} 

只要给主要内容的公共类和使用方法如下：

$(function(){ 
    $('.slideshow').simpleSlides() 
}); 

的each环在插件将隔离实例

DEMO

Answer 2

为什么不写一个插件呢？

(function ($) { 

    var easySliderFunc=function(options,elem){ 
     var setting=$.extend({ 
      delay=5000, 
      transition=100 
     },options); 

     var container = $(elem), 
      listItems   = container.children('li'), 
      listLen    = listItems.length, 
      i     = 0, 

     changeList = function() { 

      listItems.eq(i).fadeOut(setting.transition, function() { 
       i += 1; 
       if (i === listLen) { 
        i = 0; 
       } 
       listItems.eq(i).fadeIn(setting.transition); 
      }); 

     }; 

     listItems.not(':first').hide(); 
     setInterval(changeList, setting.delay); 
    }; 
    $.fn.easySlider=function(options){ 
     return $(this).each(function(){ 
      easySlider(options,this); 
     }); 
    } 
}(jQuery)); 

那么你可以很容易将其称为：

$("#exampleSlider").easySlider({ 
    transition:100, //it can be any number 
    delay: 5000  //it can be any number 
});