轮播效果在页面中经常用到的比较普通的照片轮播效果插件：

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({// speed for the sliding animationsliderSpeed : 500,// easing for the sliding animationsliderEasing : 'easeOutExpo',// speed for the item animation (open / close)itemSpeed : 500,// easing for the item animation (open / close)itemEasing : 'easeOutExpo',// number of items to scroll at a timescroll : 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><!-- ca-wrapper --></div><!-- ca-container -->

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