一个html页面javascript中的两个简易滑块

我已使用简易滑块进行幻灯片放映。我需要在同一html页面的两个位置使用相同的滑块

我尝试过这个，但只有一个滑块工作

<script type="text/javascript" src="js/easySlider.packed.js"></script>
<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider_single").easySlider();
        $("#slider_specials").easySlider(); 


});
</script>

$（文档）.ready（函数（）{
$（“#滑块单”）.easySlider（）；
$（“#slider_specials”）.easySlider（）；
});

Html代码：

<div id="slider_single">
<ul>
<li><a href="#"><img src="images/slider1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slider2.jpg" alt="" /></a></li>
</ul>
</div>


<div id="slider_specials">
<ul>
<li><a href="#"><img src="images/slider3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slider4.jpg" alt="" /></a></li>
</ul>
</div>

---

如何解决此问题？

在div上，您需要确保应用了CSS样式。我知道这是一种在同一页面上使用两个滑块的样式

<div id="slider" style="width: 696px; height: 241px; overflow: hidden;">
  <ul style="width: 4176px; margin-left: -2088px;">
    <li style="float: left; margin-left: -696px;">
    <li style="float: left;" />
    <li style="float: left;" />
    <li style="float: left;" />
  </ul>
</div>

宽度：4176px；左边距：-2088px；“>

---

在你的两个滑块上尝试一下，看看这是否能使它们在同一页面上工作。

@lifeline请参考此链接，在同一HTML页面上制作两个滑块

<div id="slider" style="width: 696px; height: 241px; overflow: hidden;">
  <ul style="width: 4176px; margin-left: -2088px;">
    <li style="float: left; margin-left: -696px;">
    <li style="float: left;" />
    <li style="float: left;" />
    <li style="float: left;" />
  </ul>
</div>

（或）像这样更改脚本

<script type="text/javascript">
        $(document).ready(function(){   
            $("#slider_single").easySlider({
                auto: true,
                continuous: true

            });
            $("#slider_specials").easySlider({ 
                auto: true,
                continuous: true
            });
        }); 
    </script>

$（文档）.ready（函数（）{
$（“#滑块单”）.easySlider({
是的，
连续的：对
});
$（“#slider_specials”）.easySlider（{
是的，
连续的：对
});
}); 

我对在一个文档中制作两个简单的滑块没有问题

检查小提琴：

使用的html： 同样的jQuery： 这是一个

easy slider

插件：

---

如果是这样的话，我想你可能有CSS问题。你的JS看起来不错。

 .content {
    position:relative;
 }
 .content img {
    width:696px;
    height:241px;
 }
 .content ul, .content ul li {
    margin:0;
    padding:0;
    list-style:none;
 }

$("#slider_specials").easySlider();
$("#slider_single").easySlider();

http://cssglobe.com/lab/easyslider1.7/js/easySlider1.7.js