jquery - 创建一个jQuery滑块动态

Question

我在页面中使用了简单的滑块，但我想在同一页面中放置另一个滑块。现在我有问题，如果我使用具有相同 ID 或类的 div 它不起作用。

例子：-

  <div class="slider">
    <ul>        
      <li><a href="#"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
      <li><a href="#"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
      <li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>      
    </ul>
  </div>

如果我在同一页面中使用相同的类，它就不起作用。请帮助我如何在同一页面中多次管理相同的滑块。

Answer 1

如果您在 JavaScript 代码中使用此方法，

$("#slider").easySlider({
     auto: true,
     continuous: true 
});

然后创建

<div id="slider" class="slider">
  <ul>        
    <li><a href="#"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>      
  </ul>
</div>
<div id="slider_new" class="slider">
  <ul>        
    <li><a href="#"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>      
  </ul>
</div>

然后添加两次幻灯片 JavaScript，例如，

$("#slider").easySlider({
    auto: true,
    continuous: true 
});
$("#slider_new").easySlider({
    auto: true,
    continuous: true 
});

这应该有效。我假设你正在使用这个