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

Question

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

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

我尝试了不同的 ID，但它不起作用。甚至布局也没有显示差异 ids（在 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

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

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

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

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

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

Answer 3

只需给他们不同的 ID，而不是同时调用他们。他们单独的身份将阻止他们发生冲突 这里我在弹性滑块上使用了相同的方法

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