自動JQuery幻燈片

我使用JavaScript和JQuery創建了這個幻燈片。我想在網頁上多次使用它。我可以同時出現，但只有一個會循環遍歷所有圖片，然後重新開始。第二個只循環，然後結束。有人可以幫助我的代碼？我希望網頁上的所有幻燈片都能持續循環播放。謝謝。自動JQuery幻燈片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/> 

<title></title> 

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 

<script type="text/javascript"> 
function slideSwitch() { 
    var $active = $('#slideshow IMG.active'); 

    if ($active.length == 0) $active = $('#slideshow IMG:last'); 
    var $next = $active.next().length ? $active.next() 
     : $('#slideshow IMG:first'); 

    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
} 

$(function() { 
    setInterval("slideSwitch()", 5000); 
}); 
</script> 

<style type="text/css"> 

#slideshow { 
    position:relative; 
    height:350px; 
} 

#slideshow IMG { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:8; 
    opacity:0.0; 
} 

#slideshow IMG.active { 
    z-index:10; 
    opacity:1.0; 
} 

#slideshow IMG.last-active { 
    z-index:9; 
} 

</style> 

</head> 

<div id="slideshow"> 
    <img src="ocean.png" alt="Slideshow Image 1" class="active" /> 
    <img src="ocean2.png" alt="Slideshow Image 2" /> 
    <img src="ocean3.png" alt="Slideshow Image 3" /> 
</div> 

<br /> 

<div id="slideshow"> 
    <img src="flower.png" alt="Slideshow Image 1" class="active" /> 
    <img src="flower2.png" alt="Slideshow Image 2" /> 
    <img src="flower3.png" alt="Slideshow Image 3" /> 
</div> 

</body> 
</html>

來源

2012-09-23 user1657160

嘗試使div ID獨一無二。你可以爲他們兩個使用相同的類。 – Asdfg

你能舉個例子說明你的意思嗎？我有點理解，但我試着玩弄它，並沒有任何工作。我需要更改div id =「slideshow」的名稱嗎？如果是這樣，我還需要在CSS和查詢部分更改以上的內容嗎？ – user1657160

你可以生成幻燈片的一個惟一的ID，因爲你$('#slideshow IMG.active');東西拿起你有多個實例。嘗試是這樣的部分：

function slideShow(element_of_slideshow){ 
    var now = new Date().getTime(), uid = "ss" + now; 
    $(element_of_slideshow).attr("id",uid); 

    // then call it like this in the function 
    $("#"+uid+" IMG.active');

來源

2012-09-23 02:58:03 JKirchartz

你的問題是，在html標籤id屬性都應該是在頁面上獨一無二的。

因此，您的選擇器：$('#slideshow IMG:last')將會在第一個中找到id爲#slideshow的標記的最後一個img標記。可以考慮使用jquery plugin pattern。

來源

2012-09-23 02:58:29

自動JQuery幻燈片

回答

相關問題