不能在網頁中使用兩個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

只要給他們不同的ID，然後再稱他們兩個。其單獨的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> 

Answer 3

而不是改變在其中顯示滑塊的div ID，一個更好的選擇是在JavaScript中選擇div而不是id。

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

如果你的div有ID =「滑塊」和class =「nivoSlider」你應該使用這樣

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

看看這個腳本在NIVO滑塊PHP文件，並替換與選擇我寫的是什麼。希望這可以幫助