運行多個幻燈片循環

Question

我在一個頁面上有四個幻燈片，我只想運行在循環中。它們很簡單，基於Jon Raasch's簡單的JQuery幻燈片。

我很高興與標記和CSS，但尚未很熟練的JavaScript。現在，我可以獲得一個幻燈片，但不能同時播放四個幻燈片。我很想幫助所有四個人工作。謝謝！

JS：

<script type="text/javascript" src="js/jquery.bxslider.min.js"></script> 

    <script type="text/javascript"> 
    $('#slider1').bxSlider({ 
    auto: true, 
    autoControls: true, 
    pause: 3000, 
    slideMargin: 20 
    }); 

    $('#slider2').bxSlider({ 
    auto: true, 
    autoControls: true, 
    pause: 3000, 
    slideMargin: 20 
    }); 

    $('#slider3').bxSlider({ 
    auto: true, 
    autoControls: true, 
    pause: 3000, 
    slideMargin: 20 
    }); 

    $('#slider4').bxSlider({ 
    auto: true, 
    autoControls: true, 
    pause: 3000, 
    slideMargin: 20 
    }); 
    </script> 

CSS：

.slider { 
    position: relative; 
    float: right; 
    padding-right: 400px; 
    margin-left: 40px; 
    height: 350px; 
} 

.slider img { 
    position: absolute; 
    max-width: 350px; 
    height: auto; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    top: 0; 
    left: 0; 
    z-index: 8; 
} 

馬克 - 達：

<div> 
    <div class="slider"> 
     <ul id="slider1"> 
      <li><img src="images/.../art-1.jpg" /></li> 
      <li><img src="images/.../art-2.jpg" /></li> 
      <li><img src="images/.../art-3.jpg" /></li> 
      <li><img src="images/.../art-4.jpg" /></li> 
      <li><img src="images/.../art-5.jpg" /></li> 
     </ul> 
    </div> 
</div> 

<div> 
    <div class="slider"> 
     <ul id="slider2"> 
      <li><img src="images/.../bnl-1.jpg" /></li> 
      <li><img src="images/.../bnl-2.jpg" /></li> 
      <li><img src="images/.../bnl-3.jpg" /></li> 
      <li><img src="images/.../bnl-4.jpg" /></li> 
      <li><img src="images/.../bnl-5.jpg" /></li> 
     </ul> 
    </div> 
</div> 

<div> 
    <div class="slider"> 
     <ul id="slider3"> 
      <li><img src="images/.../bge-1.jpg" /></li> 
      <li><img src="images/.../bge-2.jpg" /></li> 
      <li><img src="images/.../bge-3.jpg" /></li> 
      <li><img src="images/.../bge-4.jpg" /></li> 
      <li><img src="images/.../bge-5.jpg" /></li> 
     </ul> 
    </div> 
</div> 

<div> 
    <div class="slider"> 
     <ul id="slider4"> 
      <li><img src="images/.../rtb-1.jpg" /></li> 
      <li><img src="images/.../rtb-2.jpg" /></li> 
      <li><img src="images/.../rtb-3.jpg" /></li> 
      <li><img src="images/.../rtb-4.jpg" /></li> 
      <li><img src="images/.../rtb-5.jpg" /></li> 
     </ul> 
    </div> 
</div> 

Answer 1

用一個簡單的幻燈片的問題是它的，好了，很簡單。考慮切換到bxSlider或Bootstrap's slider，兩者都適用於開箱即用的多個實例。

如果你真的想與這一個鬥爭，傳遞slideSwitch（）函數一個ID和使用，而不是'#slideshow'。

function slideSwitch(id, switchSpeed, activeClass) { 
    var $active = $(id + ' IMG.' + activeClass); 

    ... 

您也可以{gag}複製函數3次並更改每個函數中的ID，從而有效地運行腳本四次。

function slideSwitch1(switchSpeed,activeClass) { 
    var $active = $('#slideshow1 IMG.' + activeClass); 

function slideSwitch2(switchSpeed,activeClass) { 
    var $active = $('#slideshow2 IMG.' + activeClass); 

...