Question

我的网页需要两个不同的滑块。单击图标时将显示一个图标，单击另一个图标时，第一个滑块将消失，下一个滑块将显示在其位置。我使用的滑块是nivo滑块（jquery滑块）。但问题是，只显示第一个滑块（首先在html代码中写入的滑块）。对于第二个，显示布局并显示加载gif。图像没有任何问题（我可以使用firebug看到它们）。我重新排序滑块，它再次发生..只显示代码中首先写入的滑块。问题在于滑块ID。因为我要复制相同的代码，所以id会重复。但是任何时候都只有一个代码实例。滑块代码是

<div id="techimageslides">
   <div id="slider-wrapper">
       <div id="slider" class="nivoSlider">
           /* images */                            
       </div>
   </div>
</div>

我试过不同的ID，但它不起作用。甚至布局也没有显示diff ID（也在css中更改）..我认为它在滑块的d javascript中使用

请建议一种方法让它发挥作用..

Answer 1

基本上你只需要更改ID并按照CSS中的样式设置它们

<div id="slider" class="nivoSlider">
    <img src="../yourotherimage/images/firstimg.png"/>
</div>

<div id="slider2" class="nivoSlider">
    <src="../yourimage/images/img1p.png" alt="" title="Caption 1" /></a>
</div>

然后在该区域

<script type="text/javascript">
*$(window).load(function() {
    $('#slider').nivoSlider();
    setTimeout(function(){
            $('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false });
    }, 1000);
});
</script>

你几乎是对的。 nivo滑块正在jquery.nivo.slider.pack.js

中进行控制

如果您检查演示并实际复制它已完成的工作，您可以使其工作。

Answer 2

更好的选择是选择带有类而不是javascript中的id的div，而不是更改显示滑块的div的ID。

<div id="slider" class="nivoSlider">
    <img src="../yourotherimage/images/firstimg.png"/>
</div>

如果你的div有id =＆＃34; slider＆＃34;和class =＆＃34; nivoSlider＆＃34;你应该像这样使用它

<script type="text/javascript">
*$(window).load(function() {
    $('.nivoSlider').nivoSlider();
         //code of displaying slider here
    });
});
</script>

在nivo滑块php文件中查找此脚本，并将选择器替换为我所写的内容。希望这有帮助

Answer 3

只需给他们不同的ID，然后再将它们称为两者。他们独立的身份将阻止他们发生冲突这里我在elasti滑块上使用了相同的方法

<div class="photo">
<div class="head2">
<h2>Photo Gallery</h2>
</div>
<ul id="carousel" class="elastislide-list">
<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
</ul>
</div>
<div class="photo">
<div class="head2">
<h2>Video Gallery</h2>

<ul id="carousel2" class="elastislide-list">
<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
</ul>


</div>

enter code here

并将其称为

<script type="text/javascript">

$( '#carousel' ).elastislide();
$( '#carousel2' ).elastislide();
</script>

不能在网页中使用两个nivo滑块

3 个答案: