jQuery插件slides實現(xiàn)無縫輪播圖特效

更新時間：2015年04月17日 10:49:54 投稿：hebedich

Slides – 是一個簡單的，容易定制和風格化，的jQuery幻燈片插件。Slides提供褪色或幻燈片過渡效果，圖像淡入淡出，圖像預壓，自動生成分頁，循環(huán)，自動播放的自定義等很多選項。用Slides插件，你可以隨機播放幻燈片，設定那一套您想要開始幻燈片。

初始化插件：

slides是一款基于jQuery無縫輪播圖插件,支持圖內(nèi)元素動畫，可以自定義動畫類型

$(".slideInner").slide({
slideContainer: $('.slideInner a'),
effect: 'easeOutCirc',//動畫類型
autoRunTime: 5000,//自動輪播時間
slideSpeed: 1000,//速度
nav: true,//是否顯示左右導航
autoRun: true,//是否自動滾動
prevBtn: $('a.prev'),//左按鈕
nextBtn: $('a.next')//右按鈕
});

兼容性： ie8+、google、firefox、360、QQ、歐朋、safi

html實例：

slides默認會為個個滑塊里面的類名為moveElem的元素添加上動畫的效果元素上的rel屬性則是設置對應的延遲執(zhí)行時間和動畫類型兩個屬性每個滑塊內(nèi)可同時添加多個元素

<body>
  <div class="slides">
    <div class="slideInner">
      <a href="#" style="background: url(img/slide1.jpg) no-repeat;">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img src="img/slide1p1.png" />
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img src="img/slide1p2.png" />
        </div>
      </a>
      <a href="#" style="background: url(img/slide2.jpg) no-repeat">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img src="img/slide2p1.png" />
        </div>
      </a>
      <a href="#" class="slide3" style="background: url(img/slide3.jpg) no-repeat;">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img src="img/slide3p1.png" />
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img src="img/slide3p2.png" />
        </div>
        <div class="moveElem img3" rel="300,easeInOutExpo">
          <img src="img/slide3p3.png" />
        </div>
      </a>
      <a href="#" style="background: rgb(113, 209, 231);">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img src="img/slide1p1.png" />
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img src="img/slide1p2.png" />
        </div>
      </a>
      <a href="#" style="background: rgb(178, 44, 44);">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img src="img/slide1p1.png" />
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img src="img/slide1p2.png" />
        </div>
      </a>

    </div>
    <div class="nav">
      <a class="prev" href="#"></a>
      <a class="next" href="#"></a>
    </div>
  </div>
</body>

Github地址：https://github.com/727712787/jquery.slides 下載地址：https://github.com/727712787/jquery.slides/archive/master.zip

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: