js实现图片淡入淡出切换简易效果_html如何淡出图片 - CSDN文库

70 浏览量更新于2023-03-16 评论收藏 21KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38600696

粉丝: 6
资源: 967

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈