js實(shí)現(xiàn)幻燈片效果(基于jquery插件)
更新時(shí)間：2013年11月05日 16:08:26 作者：
說(shuō)起幻燈片效果，想必大家都不陌生吧，接下來(lái)為大家介紹下使用jquery插件jquery.smallslider.js實(shí)現(xiàn)幻燈片效果示例代碼，喜歡的朋友可以學(xué)習(xí)下
使用jquery插件jquery.smallslider.js也能實(shí)現(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代碼：
$(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
htm代碼如下：
復(fù)制代碼 代碼如下:
<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
您可能感興趣的文章:
- 基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
- 非常優(yōu)秀的JS圖片輪播插件Swiper的用法
- AngularJS 中使用Swiper制作滾動(dòng)圖不能滑動(dòng)的解決方法
- 基于JSON格式數(shù)據(jù)的簡(jiǎn)單jQuery幻燈片插件(jquery-slider)
- Bootstrap 最常用的JS插件系列總結(jié)（圖片輪播、標(biāo)簽切換等）
- 內(nèi)容滑動(dòng)切換效果jquery.hwSlide.js插件封裝
- jquery插件jquery.LightBox.js實(shí)現(xiàn)點(diǎn)擊放大圖片并左右點(diǎn)擊切換效果(附demo源碼下載)
- jQuery插件zepto.js簡(jiǎn)單實(shí)現(xiàn)tab切換
- jQuery圖片切換插件jquery.cycle.js使用示例
- 移動(dòng)端觸屏幻燈片圖片切換插件idangerous swiper.js
相關(guān)文章
用Javascript評(píng)估用戶(hù)輸入密碼的強(qiáng)度（Knockout版）
早上看到博友6點(diǎn)多發(fā)的一篇關(guān)于密碼強(qiáng)度的文章（連接），甚是感動(dòng)（周末大早上還來(lái)發(fā)文）2011-11-11
這篇文章主要介紹了css結(jié)合js制作下拉菜單的具體實(shí)現(xiàn),需要的朋友可以參考下2014-02-02
關(guān)于JavaScript中事件綁定的方法總結(jié)
下面小編就為大家?guī)?lái)一篇JavaScript中事件綁定的方法總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
Bootstrap柵格系統(tǒng)簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Boostrap柵格系統(tǒng)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JS自定義滾動(dòng)條效果簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JS自定義滾動(dòng)條效果的簡(jiǎn)單實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
JS實(shí)現(xiàn)的找零張數(shù)最小問(wèn)題示例
這篇文章主要介紹了JS實(shí)現(xiàn)的找零張數(shù)最小問(wèn)題,涉及javascript數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
學(xué)習(xí)JavaScript設(shè)計(jì)模式之裝飾者模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的裝飾者模式，對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01
這篇文章介紹了復(fù)制到剪切板js代碼，有需要的朋友可以參考需要2013-06-06
Kendo Grid editing 自定義驗(yàn)證報(bào)錯(cuò)提示的解決方法
Kendo UI是一個(gè)強(qiáng)大的框架用于快速HTML5 UI開(kāi)發(fā)?；谧钚碌腍TML5、CSS3和JavaScript標(biāo)準(zhǔn)。今天小編通過(guò)分享本文給大家介紹Kendo Grid editing 自定義驗(yàn)證報(bào)錯(cuò)提示的解決方法2016-11-11