如何使j-query照片庫滑塊與複製滑塊很好地發揮作用？

Question

首先，我對j查詢很陌生。這就是說，我有一個非常簡單的j-query照片庫滑塊，每隔幾秒就會保存圖像並淡入新圖像。我有一個我複製它的頁面，並在js中爲它提供了不同的css和class/id名稱以創建不同的名稱。我希望在同一頁上。現在，我已經完成了第二個。它引起即使他們分享不同的CSS，HTML，和J-查詢腳本

下面是第一個在所有代碼的第一個到不行：

J-查詢：

<script type="text/javascript"> 

function theRotator() { 
    //Set the opacity of all images to 0 
    $('div#rotator ul li').css({opacity: 0.0}); 

    //Get the first image and display it (gets set to full opacity) 
    $('div#rotator ul li:first').css({opacity: 1.0}); 

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds 
    setInterval('rotate()',10000); 

} 

function rotate() { 
    //Get the first image 
    var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); 

    //Get next image, when it reaches the end, rotate it back to the first image 
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); 

    //Set the fade in effect for the next image, the show class has higher z-index 
    next.css({opacity: 0.0}) 
    .addClass('show') 
    .animate({opacity: 1.0}, 1000); 

    //Hide the current image 
    current.animate({opacity: 0.0}, 1000) 
    .removeClass('show'); 

}; 

$(document).ready(function() {  
    //Load the slideshow 
    theRotator(); 
}); 

</script> 

HTML：

<div id="new_home_photo" class="round_10px"> 
    <div id="rotator"> 
     <ul> 
      <li class="show"> 
       <a href="javascript:void(0)"> 
        <div id="photo_1" class="round_7px"> 
        </div> 
       </a> 
      </li> 
      <li> 
       <a href="javascript:void(0)"> 
        <div id="photo_2" class="round_7px"> 
        </div> 
       </a> 
      </li> 
      <li> 
       <a href="javascript:void(0)"> 
        <div id="photo_3" class="round_7px"> 
        </div> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

的CSS：

/* rotator in-page placement */ 
div#rotator {position:relative;height:345px;margin-left:0px;} 

/* rotator css */ 
div#rotator ul li {float:left;position:absolute;list-style:none;} 

/* rotator image style */ 
div#rotator ul li img {vertical-align:left;} 

div#rotator ul li.show {z-index:500;} 

#photo_1 {background:url(images/home_actual_1.jpg)no-repeat; width:621px;height:420px;} 

#photo_2 {background:url(images/home_actual_2.jpg)no-repeat; width:621px;height:420px;} 

#photo_3 {background:url(images/home_actual_3.jpg)no-repeat; width:621px;height:420px;} 

這裏是第二個的工作，造成這第一個停止工作：

J-查詢：

<script type="text/javascript"> 

function theRotator() { 
    //Set the opacity of all images to 0 
    $('div#rotator_update ul li').css({opacity: 0.0}); 

    //Get the first image and display it (gets set to full opacity) 
    $('div#rotator_update ul li:first').css({opacity: 1.0}); 

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds 
    setInterval('rotate()',10000); 

} 

function rotate() { 
    //Get the first image 
    var current = ($('div#rotator_update ul li.show_update')? $('div#rotator_update ul li.show_update') : $('div#rotator_update ul li:first')); 

    //Get next image, when it reaches the end, rotate it back to the first image 
    var next = ((current.next().length) ? ((current.next().hasClass('show_update')) ? $('div#rotator_update ul li:first') :current.next()) : $('div#rotator_update ul li:first')); 

    //Set the fade in effect for the next image, the show class has higher z-index 
    next.css({opacity: 0.0}) 
    .addClass('show_update') 
    .animate({opacity: 1.0}, 1000); 

    //Hide the current image 
    current.animate({opacity: 0.0}, 1000) 
    .removeClass('show_update'); 

}; 

$(document).ready(function() {  
    //Load the slideshow 
    theRotator(); 
}); 

</script> 

HTML：

<div id="new_home_update"> 
    <div id="rotator_update"> 
     <ul> 
      <li class="show_update"> 
       <a href="javascript:void(0)"> 
        <div id="update_1" class="round_7px"> 
       <a href="http://www.prnewswire.com/news-releases/ptc-therapeutics-awarded-16-million-fda-orphan-drug-grant-to-support-an-ongoing-phase-3-study-in-cystic-fibrosis-103425769.html" target="_blank"> 
       PTC Therapeutics Awarded $1.6 Mil FDA Orphan Drug Grant to Support an Phase 3 Study in CF 
       </a> 
       </div> 
       </a> 
      </li> 
      <li> 
       <a href="javascript:void(0)"> 
        <div id="update_2" class="round_7px"> 
       <a href="http://www.docguide.com/news/content.nsf/news/852576140048867C852577A4005BDB10" target="_blank"> 
       Denufosol Provides Significant Lung Function Improvement in Patients With Mild Cystic Fibrosis 
       </a> 
       </div> 
       </a> 
      </li> 
      <li> 
       <a href="javascript:void(0)"> 
        <div id="update_3" class="round_7px"> 
       <a href="http://www.news-medical.net/news/20100918/Researchers-identify-new-target-for-cystic-fibrosis.aspx" target="_blank"> 
       Researchers identify new target for cystic fibrosis 
       <a/> 
       </div> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS：

div#rotator_update {position:relative;height:345px;margin-left:0px;} 

/* rotator css */ 
div#rotator_update ul li {float:left;position:absolute;list-style:none;} 

/* rotator image style */ 
div#rotator_update ul li img {vertical-align:left;} 

div#rotator_update ul li.show_update {z-index:500;} 

#update_1 { width:621px;height:420px;margin:7px auto 7px 60px;} 

#update_1 a {text-decoration:none; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#999999;text-align:center;} 

#update_1 a:hover {color:#F16C22;} 

#update_2 { width:621px;height:420px;margin:7px auto 7px 60px;} 

#update_2 a {text-decoration:none; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#999999;text-align:center;} 

#update_2 a:hover {color:#F16C22;} 

#update_3 { width:621px;height:420px;margin:7px auto 7px 60px;} 

#update_3 a {text-decoration:none; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#999999;text-align:center;} 

#update_3 a:hover {color:#F16C22;} 

我也嘗試了很多重命名類和shar的組合而且沒有什麼能夠讓他們同時工作。

非常感謝！

Answer 1

問題是您的功能仍然被命名爲相同（即theRotator和rotate在頁面中出現兩次），這是導致問題的原因。

最好的解決方案是更改theRotator和rotate方法，以便您可以傳入要旋轉的任何幻燈片的ID。例如：

function theRotator(sliderId) { 
    //Set the opacity of all images to 0 
    $('div#' + sliderId + 'ul li').css({opacity: 0.0}); 

    //Get the first image and display it (gets set to full opacity) 
    $('div#' + sliderId + ' ul li:first').css({opacity: 1.0}); 

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds 
    setInterval('rotate(' + sliderId + ')',10000); 
} 

function rotate(sliderId) { 
    //Get the first image 
    var current = ($('div#' + sliderId + 'ul li.show')? $('div#' + sliderId + ' ul li.show') : $('div#' + sliderId + ' ul li:first')); 

    ... 
}; 

$(document).ready(function() {  
    //Load the slideshows 
    theRotator('rotator'); 
    theRotator('rotator_update'); 
});