一个简单的轮播图
个人认为轮播图主要是注意控制的移动的css样式
<!DOCTYPE html>
<html>
<head>
<title>good</title>
<style>
*{
padding:0px;
margin:0px;
}
#main
{
width:1280px;
height:500px;
margin:20px auto;
position:relative;
}
.list
{
width:1280px;
height:500px;
position:absolute;
top:0px;
}
#all
{
width:1050px;
height:15px;
margin:auto;
position:relative;
top:-100px;
z-index:2000;
}
.ctrl
{
width:148px;
height:15px;
margin-right:2px;
background-color:rgba(128,255,255,0.8);
float:left;
}
.active,.ctrl:hover
{
background-color:rgba(255,57,57,0.8);
}
.show
{
z-index:1000;
}//主要是 show和active的移动
</style>
<meta charset="utf-8">
</head>
<body>
<div id="main">
<div class="list show"><img src="index/1.jpg"></div>
<div class="list"><img src="index/2.jpg"></div>
<div class="list"><img src="index/3.jpg"></div>
<div class="list"><img src="index/4.jpg"></div>
<div class="list"><img src="index/5.jpg"></div>
<div class="list"><img src="index/6.jpg"></div>
<div class="list"><img src="index/7.jpg"></div>
</div>
<div id="all">
<div class="ctrl active" onclick="out(0)"></div>
<div class="ctrl" onclick="out(1)"></div>
<div class="ctrl" onclick="out(2)"></div>
<div class="ctrl" onclick="out(3)"></div>
<div class="ctrl" onclick="out(4)"></div>
<div class="ctrl" onclick="out(5)"></div>
<div class="ctrl" onclick="out(6)"></div>
</div>
<script>
var x;
var index=document.getElementsByClassName("list");//获取图片
var ctrl=document.getElementsByClassName("ctrl");//获取按钮
var goindex=function()
{
var i;
/*清除show和active*/
for(i=0;i<index.length;i++)
{
index[i].className="list";
}
for(i=0;i<ctrl.length;i++)
{
ctrl[i].className="ctrl";
}
/*确定展示的图片和按钮*/
index[x].className="list show";
ctrl[x].className="ctrl active";
}
/*通过按钮函数获得控制*/
function out(n)
{
x=n;
goindex();
}
</script>
</body>
</html>
更多推荐
菜鸟教程js
发布评论