问题描述
我在寻找一个JQuery解决方案,例如旋转横幅,位于。
I am looking for a JQuery solution to something like the rotating banner located at http://www.bazaarvoice.com.
其中有一个定时滚动,但也允许用户通过翻转选项卡切换。
One where it has a timed scroll but also allows the user to toggle by rolling over tabs. Anyone know of a good, easy to style one?
推荐答案
使用插件jQuery。
它有一个垂直的小足迹和所有你需要的功能:
Use the Cycle Lite plugin for jQuery.It's got a vert small footprint and all the features you need:
- 自动滚动
- 暂停悬停
- 无限循环或定义的循环次数
- 。
- Auto scroll
- Pause on hover
- Infinite loop or defined number of loops
- Use thumbshots as pager elements
- You'll have to use divs instead of images.
。
编辑:以下是您的示例代码:
您需要,而不是Cycle Lite插件。
HTML:
here's a sample code for you:
You'll need the Cycle plugin, not the Cycle Lite plugin.
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:
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
});
享受未经测试,但应该有效。
Enjoy, it's untested, but should work.
Edit2:
将 return'< li class =thumbid =thumb-1>< ; img src ='+ slide.src +'/>< / a>< / li>';
我想你想改变宽度和/或高度。 Juste删除HTML高度,并使用CSS属性: .thumb img {height:10px; width:10px; }
您还可以添加一些自定义CSS属性。
I guess you want to change the width and/or the height. Juste remove the HTML height, and use a CSS property : .thumb img { height: 10px; width: 10px; }
You can also add some custom CSS properties.
这篇关于JQuery旋转横幅问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!