為什么我的圖片滾動不了呢？急求?。?！
<!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>
2015-09-04
#list設(shè)置position:absolute