为什么我的图片滚动不了呢？急求！！！
ladytsh
2015-09-04 16:14
<!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>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
#contain {
position: relative;
width:500px;
height: 356px;border:3px solid #ff0;overflow:hidden;
}
#list {
width: 2500px;height:356px;z-index:1
}
#list img {
float: left;
}
#pre {
background: url(hover_left.png) no-repeat top left;width:73px;height:74px;position:absolute;z-index:2;top:150px;left:0px;
}
#next{
background: url(hover_right.png) no-repeat top left;width:73px;height:74px;position:absolute;z-index:2;top:150px;right:0px;;
}
#buttons {
position: absolute;
left: 200px;
bottom: 20px;
z-index: 2;width:150px;
height: 10px;
}
#buttons span {
width:10px;
height: 10px;float:left;display:inline-block;
-moz-border-radius:50%;
border-radius:50%;
-webkit-border-radius:50%;
background: #000;
margin-right:5px;
border:1px solid #fff;
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload = function () {
var contain = document.getElementById("contain");
var list = document.getElementById("list");
var buttons = document.getElementById("buttons");
var pre = document.getElementById("pre");
var next = document.getElementById("next");
/* pre.onclick = function () {
list.style.left = parseInt(list.style.left) - 500 + "px";
}
next.onclick = function () {
list.style.left = parseInt(list.style.left) + 500 + "px"
}
};*/
function animate(offset) {
list.style.left = parseInt(list.style.left) + offset + 'px';
}
next.onclick = function () {
animate(-500);//点击时向左移动600像素
}
pre.onclick = function () {
animate(500);//点击时向右移动600像素
}
}
</script>
</head>
<body>
<div id="contain">
<div id="list" style="left:500px;">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>
<div id="buttons">
<span index="1"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<div>
<a href="#" id="pre"></a>
<a href="#" id="next"></a>
</div></div>
</body>
</html>
1回答
-
- haodaking
- 2015-09-04 22:29:28
#list设置position:absolute
焦点图轮播特效
65279 学习 · 611 问题
相似问题