图片轮播图

最新推荐文章于 2021-10-29 13:35:19 发布

X梦阳X

最新推荐文章于 2021-10-29 13:35:19 发布

阅读量335

点赞数

分类专栏： php 文章标签： php

本文链接：https://blog.csdn.net/lmy_1/article/details/53112120

版权

php 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
ul{ list-style: none;}
#view{ position: relative; width: 388px; height: 280px; margin-left:320px; border: 10px solid #bc8f8f; }
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;}
#img_list{ position: absolute; width: 960px;}
#img_list li{position: absolute; top:0; left: 0; width: 320px; height: 120px; }
/*#a{ background: #87ceeb;}
#b{ background: #ff69b4;}
#c{ background: #98fb98;}
*/

</style>
</head>
<body>
<div id="view">
<ul id="img_list">
<li id="a"><img src="img/01.jpg"></li>
<li id="b"><img src="img/02.jpg"></li>
<li id="d"><img src="img/03.jpg"></li>
<li id="e"><img src="img/04.jpg"></li>
</ul>
</div>
<script type="text/javascript">
var img_list = document.getElementById('img_list');
setInterval(function(){
var current = img_list.children[0];
for(var i = 0 ; i < 100 ; i++){
(function(pos){
setTimeout(function(){
current.style.opacity = 1 - (pos/100)*1;
},(pos + 1)*10)
})(i)
}
setTimeout(function(){
img_list.appendChild(current);
current.style.opacity = 1;
},1010);
},3500)
</script>
</body>
</html>