简单轮播图实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div_c{
width: 400px;
height: 200px;
position: relative;
}
#div_c img{
width: 400px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.zindex{
z-index: 100;
}
.zindex0{
z-index: 0;
}
#oul{
position: absolute;
left: 250px;
top: 155px;
z-index: 101;
}
#oul li{
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0,0,0,0.3);
float: left;
list-style: none;
margin: 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="div_c">
<img class="zindex" src="http://img.taopic.com/uploads/allimg/110812/1820-110Q20K24526.jpg"/>
<img src="http://wenwen.soso.com/p/20090901/20090901120135-1666292770.jpg"/>
<img src="http://pica.nipic.com/2007-12-18/200712189215503_2.jpg"/>
<img src="http://h.hiphotos.baidu.com/zhidao/pic/item/5bafa40f4bfbfbed0470471b78f0f736afc31fac.jpg"/>
<img src="http://img3.redocn.com/20091221/20091217_fa2a743db1f556f82b9asJ320coGmYFf.jpg"/>
<ul id="oul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>//我这个只能实现循环，其他点击更换图片效果还没加
var div_c=document.getElementById('div_c');
var oul=document.getElementById('oul');
var imgs=div_c.getElementsByTagName('img');
var lis=oul.getElementsByTagName('li');
var i=0;
setInterval(function(){
if(i==0){//之所以加一个if判断是以为纠正上一次循环后要改变最后一个img的样式为zindex0，同时设置imgs[0]的样式为显示;不然的话最后一个img就一直是zindex样式了
imgs[0].className="zindex";//样式为zindex就显示在最顶层，z-index值为100
imgs[4].className="zindex0";//样式为zindex0，z-index值就为0
}else{
imgs[i].className="zindex";
imgs[i-1].className="zindex0";
}
i++;
i=i%5;//求余，重新来过
},3000);
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2015-04-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
