为什么没用
求学人
2015-01-15 22:07
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>焦点轮播</title>
<style type="text/css">
#container{
width:960px;
height:250px;
border:#0F0 3px solid;
overflow:hidden;
position:relative;
}
#list{
position:absolute;
width:4800px;
height:250px;
z-index:1;
}
#list img{
float:left;
}
#buttons{
position:absolute;
height:10px;
width:100px;
z-index:2;
bottom:20px;
left:480px;
}
#buttons span{
cursor: pointer;
float:left;
border:#0F3 3px solid;
width:10px;
height:10px;
border-radius:50%;
background:#333;
margin-right:5px;
}
#buttons .on{
background:#F60;}
.arrow{
position:absolute;
cursor:pointer;
display:none;
line-height:39px;
text-align:center;
font-size:36px;
font-weight:bold;
z-index:2;
top:110px;
background: RGBA(0,0,0,.3);
color:#fff;
text-decoration:none;
height:40px;
width:40px;
}
.arrow:hover{
background: RGBA(0,0,0,.7);
}
#container:hover .arrow{
display:block;
}
#prev{ left:20px;}
#next{ right:20px;}
</style>
<script type="text/javascript">
window.onload= function() {
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
next.onclick()=function(){
list.style.left=parseInt(list.style.left)-600+'px';
}
prev.onclick()=function(){
}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -960px;">
<img src="超级二手家电网站数据库《完整版》/imge/关于我们.jpg" alt=""/>
<img src="超级二手家电网站数据库《完整版》/imge/141.jpg" alt=""/>
<img src="超级二手家电网站数据库《完整版》/imge/978.jpg" alt=""/>
<img src="超级二手家电网站数据库《完整版》/imge/关于我们.jpg" alt=""/>
<img src="超级二手家电网站数据库《完整版》/imge/141.jpg" alt=""/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="1"></span>
<span index="1"></span>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
</body>
</html>
1回答
-
- noprom
- 2015-01-18 17:16:05
建议你将代码格式化一下，没格式化后的代码实在是不好看啊。。。
焦点图轮播特效
65296 学习 · 611 问题
相似问题