@(關鍵詞)[skitter|jquery|網頁幻燈片|slider]

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

下面簡單介紹它的幾個屬性

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

下面是我寫的一個示例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>

下面還要結合css代碼，否則做不出效果來，一會在頁面看到它把所有的碎圖片輸出到了頁面

@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; }

有興趣學學的可以下載代碼

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。