JS實(shí)現(xiàn)圖片幻燈片效果代碼實(shí)例
更新時(shí)間：2020年05月21日 09:20:24 作者：努力學(xué)習(xí)的Peanut
這篇文章主要介紹了JS實(shí)現(xiàn)圖片幻燈片效果代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
其效果是點(diǎn)擊圖片切換到下一張圖片
首先準(zhǔn)備五張圖片
<ul class="imge"> <li><img src="images/1.jpg" width="400px" height="300px" /></li> <li><img src="images/2.jpg" width="400px" height="300px" /></li> <li><img src="images/3.jpg" width="400px" height="300px" /></li> <li><img src="images/4.jpg" width="400px" height="300px" /></li> <li><img src="images/5.jpg" width="400px" height="300px" /></li> </ul>
樣式
.imge li{
position:absolute;/*絕對(duì)定位*/
top:10px;
left:10px;
list-style-type:none;}
</style>
js
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//所有圖片隱藏
$(".imge li").hide();
//第一張圖片淡入
$(".imge li").first().fadeIn("slow");
//單擊事件（當(dāng)前圖片淡出，下一張圖片淡入）
$(".imge li").click(function(){
var next=$(this).next();
if($(this).index()!=$(".imge li").length-1){
$(this).fadeOut("slow");
next.fadeIn("slow");
}else if($(this).index()==$(".imge li").length-1){
next=$(".imge li").first();
$(this).fadeOut("slow");
next.fadeIn("slow");
}
return false;
});
//注：最后一張圖片的判斷
//禁止跳轉(zhuǎn)
})
</script>
其中用的是 fadeIn() -> 淡入 和 fadeOut()-> 淡出 兩者效果疊加則可用 fadeToggle()
fadeToggle() 方法在 fadeIn() -> 淡入 和 fadeOut()-> 淡出 方法之間切換。
如果元素是淡出顯示的，fadeToggle() 會(huì)使用淡入效果顯示它們。
如果元素是淡入顯示的，fadeToggle() 會(huì)使用淡出效果顯示它們。
三者的語(yǔ)法都是:$(selector).fadeOut / fadeIn / fadeToggle(speed,easing,callback)
其中slow是speed參數(shù)("毫秒","slow","fast")
毫秒
"slow"
"fast"
easing的參數(shù)("swing","linear")
"swing" - 在開(kāi)頭/結(jié)尾移動(dòng)慢，在中間移動(dòng)快
"linear" - 勻速移動(dòng)
callback:
可選。fadeToggle() 方法執(zhí)行完之后，要執(zhí)行的函數(shù)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)動(dòng)態(tài)添加上傳文件頁(yè)面
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)動(dòng)態(tài)添加上傳文件頁(yè)面，如何動(dòng)態(tài)創(chuàng)建一個(gè)input標(biāo)簽示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了js文字橫向滾動(dòng)特效，實(shí)現(xiàn)過(guò)程很簡(jiǎn)單，文字在某塊區(qū)域內(nèi)橫向無(wú)間隙滾動(dòng)，感興趣的小伙伴們可以參考一下2015-11-11
數(shù)組的 sort 方法默認(rèn)字符的編碼排序，有時(shí)候要給一組漢字排序，默認(rèn)的方法就不適用了。2008-06-06
JS實(shí)現(xiàn)容器模塊左右拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)容器模塊左右拖動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
如果你的JavaScript代碼只是增加一些功能，那么盡管大膽地把文件引用放在HTML底部吧，你會(huì)看到明顯的速度提升。本文總結(jié)了15條小建議，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了js實(shí)現(xiàn)仿百度瀑布流的方法,以完整實(shí)例形式分析了js仿百度瀑布流的相關(guān)樣式與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
使用javascript實(shí)現(xiàn)雪花飄落的效果
本文主要介紹了使用javascript實(shí)現(xiàn)雪花飄落的特效，雖然網(wǎng)上有很多，不過(guò)都是比較陳舊了，兼容性不是太好，于是動(dòng)手寫(xiě)一個(gè)，把思路和實(shí)現(xiàn)代碼都分享給大家。2015-01-01
js數(shù)據(jù)類(lèi)型以及其判斷方法實(shí)例
這篇文章主要給大家介紹了關(guān)于js數(shù)據(jù)類(lèi)型以及其判斷方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了JavaScript檢查子字符串是否在字符串中的方法,涉及JavaScript查詢(xún)、正則匹配等操作技巧,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了微信小程序人臉識(shí)別功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05