轮播效果在页面中经常用到的比较普通的照片轮播效果插件：
1.Nivo Slider：一种最常见最普通的图片轮播效果。
Demo地址：http://dev7studios.com/nivo-slider/#/demos
2.Smooth Div Scroll:鼠标移动到左右键上面才开始轮播。
Demo地址: http://www.smoothdivscroll.com/
3.s3Slider jquery plugin:一款带图片介绍的轮播效果。
Demo地址：http://www.serie3.info/s3slider/demonstration.html
4.lightbox点击图片浏览大图
Demo地址：http://leandrovieira.com/projects/jquery/lightbox/#
5.带下拉条的轮播效果
Demo地址：http://jqueryfordesigners.com/demo/slider-gallery.html
6.带缩略图的左右点击浏览效果
Demo地址:http://tympanus.net/Tutorials/ResponsiveImageGallery/
7.Circular Content Carousel with jquery带查看详细信息的图片浏览效果
Demo地址：http://tympanus.net/Development/CircularContentCarousel/#
官方网址：http://tympanus.net/codrops/2011/08/16/circular-content-carousel/
源码分析：先上官网下载tympanus插件，加载该插件并设置参数
$('#ca-container').contentcarousel({
sliderSpeed : 500,
sliderEasing : 'easeOutExpo',
itemSpeed : 500,
itemEasing : 'easeOutExpo',
scroll : 1
});
html
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="ca-icon"></div>
<h4>Stop factory farming</h4>
<h5>
<span class="ca-quote">“</span>
<span>Some text...</span>
</h5>
<a href="#" class="ca-more">more...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h7>Animals are not commodities</h7>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<p>Some more text...</p>
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
...
</div>
...
</div>
</div>
8.skitte能查看缩略图的轮播效果
Demo地址：http://www.skitter-slider.net/
9.timelinr联动轮播
Demo地址：http://www.csslab.cl/2011/08/18/jquery-timelinr/
代码分析
首先需要下载jquery.timelinr-0.9.53.js插件
然后加载插件
$(function(){
$().timelinr();
});
在 $().timelinr();中设置插件参数
参数
orientation: 'horizontal',定位方向
// value: horizontal | vertical, default to horizontal
containerDiv: '#timeline',当前div的id
// value: any HTML tag or #id, default to #timeline
datesDiv: '#dates',时间div
// value: any HTML tag or #id, default to #dates
datesSelectedClass: 'selected',当前选中时间的样式
// value: any class, default to selected
datesSpeed: 'normal',轮播的速度
// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
issuesDiv : '#issues',是否使用div
// value: any HTML tag or #id, default to #issues
issuesSelectedClass: 'selected',选择后是否使用选中样式
// value: any class, default to selected
issuesSpeed: 'fast',使用的速度
// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
issuesTransparency: 0.2,使用遮罩层的透明度
// value: integer between 0 and 1 (recommended), default to 0.2
issuesTransparencySpeed: 500,使用遮罩层的速度
// value: integer between 100 and 1000 (recommended), default to 500 (normal)
prevButton: '#prev',上一页id
// value: any HTML tag or #id, default to #prev
nextButton: '#next',下一页id
// value: any HTML tag or #id, default to #next
arrowKeys: 'false',
// value: true/false, default to false
startAt: 1,开始参数
// value: integer, default to 1 (first)
autoPlay: 'false',是否允许自动轮播
// value: true | false, default to false
autoPlayDirection: 'forward',自动轮播方向
// value: forward | backward, default to forward
autoPlayPause: 2000 自动轮播间歇
// value: integer (1000 = 1 seg), default to 2000 (2segs)< });
Html代码
<div id="timeline">
<ul id="dates">
<li><a href="#">date1</a></li>
<li><a href="#">date2</a></li>
</ul>
<ul id="issues">
<li id="date1">
<p>Lorem ipsum.</p>
</li>
<li id="date2">
<p>Lorem ipsum.</p>
</li>
</ul>
<a href="#" id="next">+</a> <!-- optional -->
<a href="#" id="prev">-</a> <!-- optional -->
</div>
10.all in one jquery rotator-content slider基本上能满足网站首页轮播所有效果(该插件需要付费购买)
Demo地址：http://www.responsivejqueryslider.com/banner_rotator.html