@(關(guān)鍵詞)[skitter|jquery|網(wǎng)頁(yè)幻燈片|slider]

Skitter 是一個(gè)非常酷炫的jQuery網(wǎng)頁(yè)幻燈片插件，支持非常多種酷炫幻燈片切換方式，下載前往官網(wǎng),另有參考文檔

下面簡(jiǎn)單介紹它的幾個(gè)屬性

• mouseOverButton: 類型為function，表示鼠標(biāo)移到控制按鈕上做的事情
• mouseOutButton: 類型為function，表示鼠標(biāo)從控制按鈕移開要做的事情
• numbers:類型為bool型，表示是否顯示數(shù)字編號(hào)列表，如果你有3張圖片，則會(huì)出現(xiàn)”1 2 3“這樣的字樣
• animation: 類型為字符串，表示動(dòng)畫類型，這個(gè)有很多，可以去看參考文檔，默認(rèn)為空或者a標(biāo)簽的class值，我一般設(shè)置為'random',表示隨機(jī)
• thumb_width: 碎片寬度，像素值
• thumb_height: 碎片高度，像素值，這兩個(gè)值越小，動(dòng)畫越細(xì)碎
• interval:切換速度，時(shí)間毫秒值
• navigation:bool型，表示是否顯示prev，next按鈕
• structure:結(jié)構(gòu)代碼（html代碼），這個(gè)插件會(huì)將你的ul li img代碼隱藏，用結(jié)構(gòu)代碼來(lái)構(gòu)造顯示

下面是我寫的一個(gè)示例demo
html代碼+javascript代碼，注意需要引入jquery-2.1.1.min.js,jquery.easing.1.3.js,js/jquery.skitter.min.js文件

<div id="wapper"><div id="slideshow" class="box_skitter fn-clear"><ul><li><img alt="" class="cubeRandom" src="images/slider01.jpg"></li> <li><img alt="" class="cubeRandom" src="images/slider02.jpg">/li> <li><img alt="" class="cubeRandom" src="images/slider03.jpg"></li> </ul></div><script type="text/javascript" language="javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" language="javascript" src="js/jquery.easing.1.3.js"></script><script type="text/javascript" language="javascript" src="js/jquery.skitter.min.js"></script> <script type="text/javascript">$(document).ready(function() {$('.box_skitter').skitter({mouseOverButton: function() { $(this).stop().animate({opacity:0.5}, 200); },mouseOutButton: function() { $(this).stop().animate({opacity:1}, 200); },numbers:false,animation: 'random',thumb_width: '70px', thumb_height: '40px',interval:1000,navigation:true});});</script> </div>

下面還要結(jié)合css代碼，否則做不出效果來(lái)，一會(huì)在頁(yè)面看到它把所有的碎圖片輸出到了頁(yè)面

@charset "utf-8"; /* CSS Document */ #wapper{width:75.66999474513925%;height:504px;overflow:hidden;position:relative; }#slideshow {zoom: 1;left: 50%;width: 1440px;height: 504px;overflow: hidden;margin-left: -720px;position: absolute; }.prev_button {position: absolute;top: 50%;left: 35px;width: 57px;height: 62px;margin-top: -31px;overflow: hidden;background: url(../images/prev.png) no-repeat left top!important;z-index: 999;text-indent: -9999em; }.next_button {position: absolute;top: 50%;right: 35px;width: 57px;height: 62px;margin-top: -31px;overflow: hidden;z-index: 999;text-indent: -9999em;background: url(../images/next.png) no-repeat left top!important; }.container_skitter {overflow: hidden;position: relative; }.image {overflow: hidden;position: relative; }.box_clone {position: absolute;top: 0;left: 0;width: 100px;overflow: hidden;display: none;z-index: 20; }.box_clone img {position: absolute;top: 0;left: 0;z-index: 20; }

有興趣學(xué)學(xué)的可以下載代碼

總結(jié)

以上是生活随笔為你收集整理的jQuery幻灯片skitter-slider插件学习总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。