JS實(shí)現(xiàn)圖片幻燈片效果代碼實(shí)例
其效果是點(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ì)使用淡出效果顯示它們。
三者的語法都是:$(selector).fadeOut / fadeIn / fadeToggle(speed,easing,callback)
其中slow是speed參數(shù)("毫秒","slow","fast")
毫秒
"slow"
"fast"
easing的參數(shù)("swing","linear")
"swing" - 在開頭/結(jié)尾移動(dòng)慢，在中間移動(dòng)快
"linear" - 勻速移動(dòng)
callback:
可選。fadeToggle() 方法執(zhí)行完之后，要執(zhí)行的函數(shù)。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹JavaScript閉包知識(shí)，包括閉包的基本概念，閉包的用途等相關(guān)知識(shí)，介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-06-06
xmlplus組件設(shè)計(jì)系列之路由（ViewStack)（7）
xmlplus 是一個(gè)JavaScript框架，用于快速開發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus組件設(shè)計(jì)系列之路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
整理CocosCreator常用知識(shí)點(diǎn)
這篇文章主要介紹了整理CocosCreator常用知識(shí)點(diǎn)，這些知識(shí)點(diǎn)，平時(shí)幾乎都能用到，希望同學(xué)們看完后，可以自己去試一下，加深印象2021-04-04
用js實(shí)現(xiàn)鍵盤方向鍵翻頁功能的代碼...2007-06-06
JS實(shí)現(xiàn)點(diǎn)擊按鈕可實(shí)現(xiàn)編輯功能
本文通過一段實(shí)例代碼給大家介紹了基于js實(shí)現(xiàn)點(diǎn)擊按鈕可編輯效果，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的的朋友參考下吧2018-07-07
由于border屬性引起的div寬度問題，確實(shí)很讓人頭疼，在本文將為大家介紹下使用JS是如何解決的，感興趣的朋友不要錯(cuò)過2013-11-11
在開發(fā)項(xiàng)目的過程中，我們經(jīng)常會(huì)需要關(guān)于javascript數(shù)組的一些算法，比方說數(shù)組去重、數(shù)組求交集、數(shù)組擾亂等等。今天就把個(gè)人的匯總整理的算法分享給大家。2016-02-02
全面了解構(gòu)造函數(shù)繼承關(guān)鍵apply call
下面小編就為大家?guī)硪黄媪私鈽?gòu)造函數(shù)繼承關(guān)鍵apply call。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
javascript中html字符串轉(zhuǎn)化為jquery dom對(duì)象的方法
最近項(xiàng)目需求要開發(fā)百度地圖相關(guān)的一個(gè)應(yīng)用，需要從硬編碼的html字符串中提取自己想要的元素以及屬性信息，由于在js中或者jq中操作元素節(jié)點(diǎn)以及屬性都是使用dom對(duì)象或者jq對(duì)象。下面介紹javascript中html字符串轉(zhuǎn)化為jquery dom對(duì)象的方法，需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了javascript筆記之匿名函數(shù)和閉包的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02