我已經成功安裝了Jquery的Cycle插件,並讓我的橫幅按我想要的方式循環播放。我的問題是圍繞建造錨。我正在嘗試構建類似http://www.bazaarvoice.com的東西。Jquery Cycle Plugin問題
似乎錨從JavaScript生成,但我可能是錯的。這是我的HTML和JavaScript。
HTML
<div id="slideshow">
<ul class="pager">
<!-- will be populated with thumbs by JS -->
</ul>
<!-- each div is considered as a slide show -->
<div><img src="/images/banner1.png" />You can place text here too !</div>
<div><img src="/images/banner2.png" />and here</div>
<div><img src="/images/banner3.png" />and even here</div>
</div><!-- close #slideshow -->
<div id="tabs"></div>
的Javascript
$("#slideshow").cycle({
fx: 'fade', // name of transition effect (or comma separated names, ex: fade,scrollUp,shuffle)
timeout: 5000, // milliseconds between slide transitions (0 to disable auto advance)
speed: 400, // speed of the transition (any valid fx speed value)
pager: "#tabs",// selector for element to use as pager container
pagerClick: null, // callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement)
pagerEvent: 'hover',// name of event which drives the pager navigation
pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement)
return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
},
before: function(){ // deselect all slides
$(".thumb").removeClass('selected');
},
after: function(foo, bar, opts){ // select current slide
$("#thumb-"+opts.currSlide).addClass('selected');
},
fit: 1, // force slides to fit container
pause: 1, // true to enable "pause on hover"
pauseOnPagerHover: 1, // stop slideshow when pagers are being hovered
autostop: 0, // true to end slideshow after X transitions (where X == slide count)
autostopCount: 0, // number of transitions (optionally used with autostop to define X)
slideExpr: "div", // all content of div#slider is a slide. but not the pager
fastOnEvent: 100, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
});
好像它會在pagerAnchorBuilder但不能肯定。
你的HTML沒有顯示,你是否正確縮進? – 2010-01-14 20:56:12
哎呦。現在解決。我還發現,如果我把
顯示出來,但試圖找出在哪裏放置「拇指」,以便顯示出來。 – bgadoci 2010-01-14 21:03:08