常用實用圖片輪播效果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