首頁 > 開發者 > JavaScript

jQuery外掛程式slides實現無縫輪播圖特效，jqueryslides

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jQuery外掛程式slides實現無縫輪播圖特效，jqueryslides

初始化外掛程式：

slides是一款基於jQuery無縫輪播圖外掛程式,支援圖內元素動畫，可以自訂動畫類型

$(".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屬性則是設定對應的 順延強制時間和動畫類型兩個屬性 每個滑塊內可同時添加多個元素

<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

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More