js實(shí)現(xiàn)幻燈片效果(基于jquery插件)
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
- 基于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)文章
JS實(shí)現(xiàn)購(gòu)物車(chē)特效
本文主要分享了用JavaScript實(shí)現(xiàn)購(gòu)物車(chē)特效的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
在html中引入外部js文件,并調(diào)用帶參函數(shù)的方法
下面小編就為大家?guī)?lái)一篇在html中引入外部js文件,并調(diào)用帶參函數(shù)的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
JSChart輕量級(jí)圖形報(bào)表工具(內(nèi)置函數(shù)中文參考)
JSChart是一個(gè)輕量級(jí)的在線(xiàn)圖表生成工具,本身十分小巧,簡(jiǎn)單易用,相對(duì)來(lái)講功能也不是特別強(qiáng)大,但是對(duì)于一些要求不高的應(yīng)用來(lái)講已經(jīng)夠用了,最近兩天在做一個(gè)監(jiān)控系統(tǒng),想到了它。2010-10-10
Bootstrap DateTime Picker日歷控件簡(jiǎn)單應(yīng)用
這篇文章主要介紹了Bootstrap DateTime Picker日歷控件的簡(jiǎn)單應(yīng)用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
Webpack-cli安裝成功后查看webpack -v報(bào)錯(cuò)案例詳解
這篇文章主要介紹了Webpack-cli安裝成功后查看webpack -v報(bào)錯(cuò)案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
淺析javascript異步執(zhí)行函數(shù)導(dǎo)致的變量變化問(wèn)題解決思路
下面小編就為大家?guī)?lái)一篇淺析javascript異步執(zhí)行函數(shù)導(dǎo)致的變量變化問(wèn)題解決思路。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05
教你用Js寫(xiě)一個(gè)簡(jiǎn)單的五子棋小游戲
聽(tīng)說(shuō)這是一道騰訊的面試題,可能網(wǎng)上已經(jīng)有不少答案了,晚上沒(méi)事看到這道題就自己做了下,下面這篇文章主要給大家介紹了關(guān)于如何用Js寫(xiě)一個(gè)簡(jiǎn)單的五子棋小游戲的相關(guān)資料,需要的朋友可以參考下2022-07-07
js+html5通過(guò)canvas指定開(kāi)始和結(jié)束點(diǎn)繪制線(xiàn)條的方法
這篇文章主要介紹了js+html5通過(guò)canvas指定開(kāi)始和結(jié)束點(diǎn)繪制線(xiàn)條的方法,涉及html5屬性的操作技巧,需要的朋友可以參考下2015-06-06

