常用实用图片轮播效果jquery插件

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

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插件，加载该插件并设置参数

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