js實現(xiàn)幻燈片效果(基于jquery插件)

更新時間：2013年11月05日 16:08:26 作者：

說起幻燈片效果，想必大家都不陌生吧，接下來為大家介紹下使用jquery插件jquery.smallslider.js實現(xiàn)幻燈片效果示例代碼，喜歡的朋友可以學(xué)習(xí)下

使用jquery插件jquery.smallslider.js也能實現(xiàn)幻燈片效果。
htm代碼如下：

 
<div id="flashbox" class="smallslider"> 
<ul style="position: absolute; top: 0px; width: 3225px;"> 
<li class="" style="float: left;"><a ><img title="" alt="400hPa" src=" /HT-400hPa-20.png" width="645"></a> </li> 
<li class="" style="float: left;"><a ><img title="" alt="500hPa" src=" /HT-500hPa-20.png" width="645"></a> </li> 
<li class="current-li" style="float: left;"><a ><img title="" alt="700hPa" src=" /HT-700hPa-20.png" width="645"></a> </li> 
<li class="" style="float: left;"><a ><img title="" alt="850hPa" src=" /HT-850hPa-20.png" width="645"></a> </li> 
<li class="" style="float: left;"><a ><img title="" alt="1000hPa" src=" /HT-1000hPa-20.png" width="645"></a> 
</li></ul> 
</div> 

js代碼：

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
$('#flashbox').smallslider({onImageStop:true, switchEffect:'ease',switchEase: 'easeOutSine',switchPath: 'left', switchMode: 'hover', showText:true, textSwitch:2}); 
}); 

使用到的腳本，樣式j(luò)query-1.7.2.min.js，jquery.smallslider.js，smallslider.css

您可能感興趣的文章:

相關(guān)文章

用Javascript評估用戶輸入密碼的強(qiáng)度（Knockout版）
早上看到博友6點多發(fā)的一篇關(guān)于密碼強(qiáng)度的文章（連接），甚是感動（周末大早上還來發(fā)文）
2011-11-11
css結(jié)合js制作下拉菜單示例代碼
這篇文章主要介紹了css結(jié)合js制作下拉菜單的具體實現(xiàn),需要的朋友可以參考下
2014-02-02
關(guān)于JavaScript中事件綁定的方法總結(jié)
下面小編就為大家?guī)硪黄狫avaScript中事件綁定的方法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
Bootstrap柵格系統(tǒng)簡單實現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Boostrap柵格系統(tǒng)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
JS自定義滾動條效果簡單實現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JS自定義滾動條效果的簡單實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
這篇文章主要介紹了JavaScript原型鏈?zhǔn)纠?，有需要的朋友可以參考一?/div> 2014-01-01

JS實現(xiàn)的找零張數(shù)最小問題示例
這篇文章主要介紹了JS實現(xiàn)的找零張數(shù)最小問題,涉及javascript數(shù)學(xué)運算相關(guān)操作技巧,需要的朋友可以參考下
2017-11-11
學(xué)習(xí)JavaScript設(shè)計模式之裝飾者模式
這篇文章主要為大家介紹了JavaScript設(shè)計模式中的裝飾者模式，對JavaScript設(shè)計模式感興趣的小伙伴們可以參考一下
2016-01-01
js復(fù)制到剪切板的實例方法
這篇文章介紹了復(fù)制到剪切板js代碼，有需要的朋友可以參考需要
2013-06-06
Kendo Grid editing 自定義驗證報錯提示的解決方法
Kendo UI是一個強(qiáng)大的框架用于快速HTML5 UI開發(fā)?；谧钚碌腍TML5、CSS3和JavaScript標(biāo)準(zhǔn)。今天小編通過分享本文給大家介紹Kendo Grid editing 自定義驗證報錯提示的解決方法
2016-11-11