我正在为位于 http://www.bazaarvoice.com 的旋转横幅寻找 JQuery 解决方案.
它有一个定时滚动,但也允许用户通过滚动选项卡进行切换。有谁知道一款不错的、易于设计的款式吗?
最佳答案
使用 Cycle Lite jQuery 插件。 它占地面积非常小,并且具备您需要的所有功能:
- 自动滚动
- 悬停时暂停
- 无限循环或定义的循环次数
- Use thumbshots as pager elements
- You'll have to use divs instead of images .
See more advanced demos right here .
编辑:这里有一个示例代码:
你需要 Cycle plugin ,而不是 Cycle Lite 插件。
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" /></div>
<div><img src="/images/banner3.png" /></div>
</div>
CSS:
.thumb.selected {
border: 2px gray solid;
}
ul.pager li {
list-style: none;
float: left;
width: 200px;
height: 80px;
background-color: #eee;
}
#slideshow > div {
background-color: #eee;
border: 1px solid #ddd;
}
Javascript:
$("#slideshow").cycle({
fx: 'fade', // name of transition effect (or comma separated names, ex: fade,scrollUp,shuffle)
timeout: 1000, // 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
});
享受吧,它未经测试,但应该可以工作。
编辑2:
将 pagerAnchorBuilder 选项替换为 return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" /></a></li>';
我猜您想更改宽度和/或高度。只需删除 HTML 高度,并使用 CSS 属性:.thumb img { height: 10px; width: 10px; }
您还可以添加一些自定义 CSS 属性。
关于javascript - jQuery 旋转横幅问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2060140/