jQuery循環插件：一個尋呼機控制頁面上的多個幻燈片

我有一個循環插件設置在頁面（圖像）與尋呼機控制水平幻燈片。我的問題是，有一個透明的覆蓋圖，需要在圖像的一部分上放置與每幅圖像相關的文本，但寧願使用不同的過渡效果，因此它不會從左側滑入。我是否能夠設置幻燈片放映，每個都有3個相關內容，我可以正確定位並使用一個傳呼機控制它們？jQuery循環插件：一個尋呼機控制頁面上的多個幻燈片

我的劇本目前看起來是這樣的：

$(function() { 
$('.s4').before('<div id="nav" class="nav">').cycle({ 
    fx:  'scrollHorz', 
    speed: 'slow', 
    speedIn: 'slow', // speed of the 'in' transition 
    speedOut: 'slow', 
    timeout: 6000, 
    pager: '#nav' 
});

}）;通過在這樣的類屬性的選項http://jquery.malsup.com/cycle/meta2.html 指定每個幻燈片容器的選擇： -

我希望這是有道理的，

感謝

來源

2010-06-09 Michael

如果您爲每個幻燈片（如果每個幻燈片都有自己的ID）調用循環兩次，但給它們兩個相同的尋呼機ID，它會工作嗎？ – superUntitled 2010-06-09 06:58:34

我試過這個，但它仍然加載兩個單獨的尋呼機。 – Michael 2010-06-09 21:48:37

找到解決方案。像往常一樣在我的鼻子下面！ http://www.malsup.com/jquery/cycle/pager-double.html – Michael 2010-06-11 05:26:17

@Awestruck您可以使用元數據插件<div class="slideshow { fx: 'scrollLeft', delay: -2000 }">我已經收錄了一個來自cycle插件網站的黑客案例。這個例子唯一的依賴文件是jquery.metadata.js。

<!doctype html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - One Pager, Two Slideshows - Different Options for each class</title> 
<style type="text/css"> 
body { padding: 30px } 
.slideshow { height: 232px; width: 232px; margin: 30px; float: left } 
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
#nav { text-align: center } 
#nav a { padding: 5px; margin: 5px; background: #eee; border: 1px solid #ccc; text-decoration: none } 
#nav a.activeSlide { background: #ddd; color: #800 } 
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<script type="text/javascript" src="jquery.metadata.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').each(function(index) { 
     $(this).cycle({ 
      pager: '#nav', 
      pagerAnchorBuilder: function(i) { 
       if (index == 0) 
        // for first slideshow, return a new anchro 
        return '<a href="#">'+(i+1)+'</a>'; 
       // for 2nd slideshow, select the anchor created previously 
       return '#nav a:eq('+i+')'; 
      } 
     }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="nav"></div> 
    <div class="slideshow { fx: 'scrollLeft', delay: -2000 }"> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
    </div> 
    <div class="slideshow { fx: 'turnDown' }"> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
    </div> 
</body> 
</html>

來源

2011-06-10 22:09:20

jQuery循環插件：一個尋呼機控制頁面上的多個幻燈片

回答

相關問題