建站资讯

js图片转动特效代码

来源：帝国CMS模板网作者：情念时间：2026-07-07

浏览：29 收藏点赞(0)

简介：完整的js图片转动特效代码，复制就可使用，代码如下：图片转动特效 .box{ width:200px; height:200px; position:relative; margin:20pxauto; } .boximg{ position:absolute; left:0; top:0; width:200px; height:200px; } varbox=document.querySelector('.box'); v

完整的js 图片转动特效代码，复制就可使用，代码如下：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>图片转动特效</title>
<styletype="text/css">
.box{
width:200px;
height:200px;
position:relative;
margin:20pxauto;
}
.boximg{
position:absolute;
left:0;
top:0;
width:200px;
height:200px;
}
</style>
</head>
<body>
<divclass="box">
<imgsrc="1.jpg"alt="">
<imgsrc="2.jpg"alt="">
<imgsrc="3.jpg"alt="">
</div>
<scripttype="text/javascript">
varbox=document.querySelector('.box');
varimgs=box.querySelectorAll('img');
varindex=0;
setInterval(function(){
imgs[index].style.opacity=0;
index++;
if(index>=imgs.length){
index=0;
}
imgs[index].style.opacity=1;
},1000);
</script>
</body>
</html>