在我的嵌套幻燈片中,我有'prev'和'next'控件。如果你在第一張幻燈片上,我希望能夠減少'prev'的css不透明度,如果你在最後一張幻燈片上,我希望能夠減小'next'的css不透明度。jquery循環插件,嵌套幻燈片,'後'選項或測試第一個和最後一個圖像
'after:onAfter'選項應該足夠了,但是當放置在我的嵌套幻燈片控件的代碼中時,它看起來不起作用。
是否有一種方法可以在嵌套幻燈片中正確實現'after',或者可以測試嵌套幻燈片中的第一張和最後一張圖片? Thankyou
這是我的代碼。
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// init and stop the inner slideshows
var inners = $('.inner-slideshow').cycle().cycle('stop');
var slideshow = $('#slideshow').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '#nav li:eq(' + (idx) + ') a';
},
before: function() {
// stop all inner slideshows
inners.cycle('stop');
// start the new slide's slideshow
$(this).cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
prev: '#prev',
next: '#next',
nowrap: 1
});
}
});
});
</script>
<title>dev</title>
</head>
<body>
<ul id="nav">
<li><a href="#">Top Slidehsow 1</a></li>
<li><a href="#">Top Slidehsow 2</a></li>
</ul>
<div id="controls">
<a id="prev" href="#">< Prev</a>
<a id="next" href="#">Next ></a>
</div>
<div id="slideshow">
<div class="inner-slideshow">
<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">
</div>
<div class="inner-slideshow">
<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/beach6.jpg" width="200" height="200">
</div>
</div>
</body>
</html>
首先,該代碼甚至沒有做什麼,我想你想要的。玩過各種選項後(看http://jsfiddle.net/morrison/m8AFG/1/到http://jsfiddle.net/morrison/m8AFG/4/),我無法讓你的代碼有兩個幻燈片,在它們之間切換。 – 2011-06-16 17:27:23
嗨,對不起,我看看你的鏈接。我已經將我的問題中的代碼從代碼片段更新到應該工作的整個頁面。 – 2011-06-16 18:15:10