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/>
上一篇
超大霸屏的网页特效代码
https/SSL证书广告优选IDC>>
推荐主题模板更多>>
推荐文章
青龙面板和宝塔面板哪个好用宝塔面板安装FRP内网穿透discuz里register.php在哪dedecms qq登录微信登录微博登录比思powered by discuzdiscuz register.htmldiscuz index.phppowered by discuz x1.5腾讯云服务轻量版官网入口wordpress被上传木马文件网站交易怎么去掉power by dedecms公司power by dedecms宝塔面板怎么查询账号密码怎么把宝塔面板删了64m内存搭建zblog1024xp最新合集discuzmysql怎么弄图片吗mysql图片怎么添加nginx 无法运行php文件或目录怎么办PHP二级导航分类怎么做
