jquery簡單的圖像幻燈片在網站上的多個幻燈片

從這裏的解決方案（https://stackoverflow.com/a/18493684/1969917）我用來在網站上顯示圖像幻燈片。現在客戶希望在同一個網站上有另一張圖片幻燈片，但這會起作用。我用另一個ID嘗試它並複製JavaScript。但第二個是行不通的。只有第一個滑塊可以正常工作。jquery簡單的圖像幻燈片在網站上的多個幻燈片

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代碼來改變與在網站上不止一個幻燈片工作？

來源

2014-09-27 WPler

請添加HTML代碼以及 – 2014-09-27 09:28:12

你可以把你的代碼放到一個非常簡單的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

來源

2014-09-27 09:43:32 charlietfl

謝謝，這將很好地工作。 – WPler 2014-09-27 18:06:12

爲什麼不寫一個插件呢？

(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 
});

來源

2014-09-27 09:44:58

jquery簡單的圖像幻燈片在網站上的多個幻燈片

回答

相關問題