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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
javascript实现的拖拽效果，可以把屏幕上的图片拖动到任意地方，效果平滑，点击图片还可以从侧边展开图片的详细信息，非常好的相册效果2015-05-05
下面的一个例子就是以独立函数写出的JavaScript日期格式化函数，独立的format函数。回到格式化的这一知识点上，我们考查的是怎么实现的、运用了哪些原理2014-01-01
这篇文章主要介绍了理解JavaScript中的适配器模式,适配器模式即Adapter Pattern，是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，下文更多相关介绍需要的小伙伴可以参考一下2022-08-08
这篇文章主要为大家详细介绍了js鼠标跟随运动效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
滚动条高度如何获取，方法有很多，在本文将为大家详细介绍下如何使用js做到，下面有个不错的示例，感兴趣的朋友不要错过2013-10-10
本文主要介绍了js代码异常监控的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
JavaScript实现自动生成网页元素功能（按钮、文本等）
这篇文章主要介绍了JavaScript实现自动生成网页元素功能，文章列出了三种可以进行增删改克隆按钮、文本等元素的方法，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了简单谈谈JavaScript的同步与异步的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要为大家详细介绍了微信小程序使用视频播放器video组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了javascript HTML+CSS实现经典橙色导航菜单的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论