js實現(xiàn)圖片淡入淡出切換簡易效果
更新時間：2021年09月17日 09:25:59 作者：如弈如意
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片淡入淡出切換簡易效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js圖片淡入淡出切換詳細代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
ul{overflow: hidden;}
li{list-style: none;height: 30px;border: 1px solid #000;width: 100px;float: left;line-height: 30px;text-align: center;}
img{width:306px;opacity: 0;}
.active{background:yellow}
</style>
</head>
<body>
<ul>
<li>王寶強</li>
<li>馬蓉</li>
<li>宋吉</li>
</ul>
<img src=""/>
</body>
<script src="public.js"></script>
<script type="text/javascript">
var oLi=document.getElementsByTagName("li");
var oImg=document.getElementsByTagName("img")[0];
var arr=['img/wbb.jpg','img/wlp.jpg','img/qs.jpg']
var time=null;
var time1=null;
for(i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onclick=function(){
for(i=0;i<oLi.length;i++){
oLi[i].className="";
}
this.className="active";
oImg.src=arr[this.index];
var num=0;
var step=2;
clearInterval(time);
clearInterval(time1);
time = setInterval(function(){
num+=step;
if(num>=200){
num=200;
clearInterval(time);
}
oImg.style.opacity = num/200;
},20)
}
}
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript實現(xiàn)的拖拽效果，可以把屏幕上的圖片拖動到任意地方，效果平滑，點擊圖片還可以從側(cè)邊展開圖片的詳細信息，非常好的相冊效果2015-05-05
下面的一個例子就是以獨立函數(shù)寫出的JavaScript日期格式化函數(shù)，獨立的format函數(shù)。回到格式化的這一知識點上，我們考查的是怎么實現(xiàn)的、運用了哪些原理2014-01-01
這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter Pattern，是作為兩個不兼容的接口之間的橋梁。這種類型的設(shè)計模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家詳細介紹了js鼠標跟隨運動效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
滾動條高度如何獲取，方法有很多，在本文將為大家詳細介紹下如何使用js做到，下面有個不錯的示例，感興趣的朋友不要錯過2013-10-10
本文主要介紹了js代碼異常監(jiān)控的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
JavaScript實現(xiàn)自動生成網(wǎng)頁元素功能（按鈕、文本等）
這篇文章主要介紹了JavaScript實現(xiàn)自動生成網(wǎng)頁元素功能，文章列出了三種可以進行增刪改克隆按鈕、文本等元素的方法，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了簡單談談JavaScript的同步與異步的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細介紹了微信小程序使用視頻播放器video組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
javascript HTML+CSS實現(xiàn)經(jīng)典橙色導航菜單
這篇文章主要介紹了javascript HTML+CSS實現(xiàn)經(jīng)典橙色導航菜單的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02