原生JS 图片变换特效

最新推荐文章于 2023-12-05 19:13:54 发布

鹿目达也

最新推荐文章于 2023-12-05 19:13:54 发布

阅读量826

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/t1753867136/article/details/80405409

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换特效</title>
<style>
#images{
position:relative;
width:100%;
height: 500px;
overflow:hidden;
}
#images li{
position:absolute;
height:100%;
opacity:0;
transition:opacity 2s;
}
#images li:first-child{
position:absolute;
opacity:1;
}
#images li img{
width:50%;
}
body{
	overflow:hidden;
}
li{
	list-style: none;
}

</style>
</head>
<body>
<div style="position:relative;">
<ul id="images">
<li><img src="images/p1.jpg"></li>
<li><img src="images/p2.JPG"></li>
<li><img src="images/p3.jpg"></li>
<li><img src="images/p4.jpg"></li>
</ul>
</div>  

<script>

var oLi = document.getElementById("images").getElementsByTagName("li");
var index = 0;

function nexts(){
index++;
if(index == oLi.length){
index = 0;
}
for(var i=0;i<oLi.length;i++){
oLi[i].style.opacity = "0";
}
oLi[index].style.opacity = "1";
}

timer=setInterval(nexts,2000);  

</script> 
</body>
</html>

鹿目达也

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生JS 图片变换特效

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;图片切换特效&lt;/title&gt;&lt;style&gt;#images{position:relative;width:100%;height: 500px;overflow:h
复制链接

扫一扫