使用jquery插件jquery.smallslider.js也能實現幻燈片效果。
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代碼:
~~~
$(document).ready(function(){
$('#flashbox').smallslider({onImageStop:true, switchEffect:'ease',switchEase: 'easeOutSine',switchPath: 'left', switchMode: 'hover', showText:true, textSwitch:2});
});
~~~
使用到的腳本,樣式jquery-1.7.2.min.js,jquery.smallslider.js,smallslider.css
- 前言
- js封裝和作用域
- 封裝html的select標簽的js操作
- js正則表達式的使用
- 使用閉包對setTimeout進行簡單封裝
- js中如何復制一個對象,如何獲取所有屬性和屬性對應的值
- js中如何把字符串轉化為對象
- js操作iframe兼容各種瀏覽器
- js模板方法的思路及實現
- 在js中如何實現方法重載?以及函數的參數問題
- 單純的html頁面如何提交,傳遞參數,以及對身份的驗證
- ajax如何調試
- js綜合應用簡單的表格統計
- js格式化貨幣數據
- js綜合應用:表格的四則運算
- 如何在瀏覽器中打開PDF文件并實現預覽的思路與代碼
- js實現幻燈片效果
- js實現幻燈片效果二
- jquery-easyui必填項隱藏問題的處理方案
- jquery-easyui隱藏可用不可用的問題的處理方案
- js變量作用域--變量提升