运行多个幻灯片循环

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

...