Javascript 同一页上的2个Nivo滑块不工作

由于某些我看不见的原因，我在同一页上有两个nivo滑块无法工作。非常感谢你的帮助。下面是我正在修改的著名Nivo滑块代码

标题

 <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Nivo滑块1

<div id="wrapper">
    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
           <img src="images/up.jpg" data-thumb="images/up.jpg" alt=""/>
            <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt=""/>
            <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt=""/>
        </div>

    </div>

</div>

Nivo滑块2

<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider2" class="nivoSlider2">
<em><img src="images/up2.jpg" data-thumb="images/toystory2.jpg" alt="" title="Hello, My name is Daisy and I am a mobile beauty specialist covering the Cambridge area." data-transition="fade" />
<img src="images/walle2.jpg" data-thumb="images/up2.jpg" alt="" title="My clients know that when they come to me, they will get the service and the look that they want. I really can help you be that face that gets noticed in the crowd." data-transition="fade" />
<img src="images/nemo2.jpg" data-thumb="images/walle2.jpg" alt="" title="However I am not just a specialist in applying make-up, I offer luxury manicures and pedicures, Sienna X spray tanning, massages and a lot mot" data-transition="fade" />
<img src="images/toystory2.png" data-thumb="images/nemo2.jpg" alt="" title="This is an example of a caption" data-transition="fade" />
        </em></div>
</div>

</div>

JavaScript

<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({pauseTime:10000});
    $('#slider2').nivoSlider({pauseTime:5000});
    effect:'fade'
});
</script>

$（窗口）。加载（函数（）{
$（'#slider'）.nivoSlider（{pauseTime:10000}）；
$（'#slider2'）.nivoSlider（{pauseTime:5000}）；
效果：“褪色”
});

请更改其中一个滑块的

，然后检查

---

注意：您不应该在任何时候为两个div（不仅仅是div）拥有相同的id。

这里有一些问题

你有重复的身份证。我怀疑这是个问题，但这是个坏习惯

在第二个滑块中，图像周围有

标记

最后，您错误地指定了

effect

参数-这很可能是问题的原因

$(window).load(function() {
    $('#slider').nivoSlider({pauseTime:10000});
    $('#slider2').nivoSlider({
        pauseTime:5000,
        effect:'fade'
    });
});

---

我不知道NIVO是什么，但是有两个元素具有相同的ID是错误的

ID=“wrapper”

。为什么第二个滑块中的所有图像都用

em

标记包装？此外，效果语法不正确。您很可能会收到一个Javascript错误。检查你的控制台。