js图片转动特效代码
时间 : 2023-02-23 23:07:41声明： : 文章内容来自网络，不保证准确性，请自行甄别信息有效性
<span style="white-space: nowrap;">完整的js图片转动特效代码，复制就可使用，代码如下：</span>
<span style="white-space: nowrap;"><br/></span>
<br/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片转动特效</title>
<style type="text/css">
.box{
width:200px;
height:200px;
position:relative;
margin:20px auto;
}
.box img{
position:absolute;
left:0;
top:0;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="box">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
</div>
<script type="text/javascript">
var box = document.querySelector('.box');
var imgs = box.querySelectorAll('img');
var index = 0;
setInterval(function(){
imgs[index].style.opacity = 0;
index++;
if(index >= imgs.length){
index = 0;
}
imgs[index].style.opacity = 1;
}, 1000);
</script>
</body>
</html><span style="white-space: nowrap;"></span><br/>
<br/>
上一篇
超大霸屏的网页特效代码
推荐主题模板更多>>
推荐文章
花色堂powered discuz论坛腾讯云服务轻量版官网入口比思powered by discuz宝塔面板怎么查询账号密码1024xp最新合集discuz卸载宝塔面板指令nginx 无法运行php文件或目录怎么办宝塔面板登录网址忘了php嵌入html代码的三种方法是什么notepad里怎么比较两个文件discuz论坛怎么注册帐号门户手机版powered discuznotepad文件太大打不开怎么办discuz论坛怎么生成邀请码wordpress的默认用户名和密码宝塔面板怎么查看登录密码火影忍者手游腾讯云怎么进宝塔面板搭建网站出现404安装好wordpress之后怎么进入phpstudy 无法启动怎么办
