快捷導(dǎo)航

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

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

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

初始化插件：

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

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

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

html實(shí)例：

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

<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

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

您可能感興趣的文章: