js实现图片淡入淡出切换简易效果
更新时间：2021年09月17日 09:25:59 作者：如弈如意
这篇文章主要为大家详细介绍了js实现图片淡入淡出切换简易效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js图片淡入淡出切换详细代码，供大家参考，具体内容如下
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇浅谈JS之iframe中的窗口。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了javascript面向对象之对象的深入理解,将javascript面向对象程序设计中一切都视为对象,并以实例形式进一步分析了面向对象的特性,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了js实现验证码干扰，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
只有机器已经联网以后，web应用才能启动，下面使用javascript判断机器是否联网，具体判断代码如下，有此需求的朋友可以参考下2013-08-08
制作论坛用到的输入框~想模仿百度之类的写一个自动匹配字符2013-06-06
数据库操作的,可以采用多方案,下面这篇文章主要给大家介绍了关于uni-app操作数据库的三种方法,文中通过实例代码和图文介绍的非常详细,需要的朋友可以参考下2023-05-05
最近小编在项目中用到了一款带轮播组件，功能非常齐全，可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能，下面小编通过本文给大家详细介绍下实现过程，需要的朋友参考下吧2016-11-11
这篇文章主要介绍了微信小程序封装自定义弹窗的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
将图片查询出来之后，还需要加一个查看大图的功能，于是就用js写了一个方法，然后在image的onmouseover事件中调用此方法，这样在鼠标悬浮在小图上面的时候，其大图就会自动的显示出来。2013-03-03
这篇文章主要为大家详细介绍了基于Express框架使用POST传递Form数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
最新评论