初始化插件：
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
以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
