Javascript 图片滚动效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {margin:0; padding: 0}
button {
width: 50px;
}
p {
text-align: center;
}
.active {
background-color: yellow;
}
#wrap {
width:510px;
overflow: hidden;
margin:0 auto;
}
#inner {
width:9999px;
overflow: hidden;
position: relative;
left:0;
/*低版本IE不支持*/
transition: left 0.6s;
}
#inner a {
float: left;
}
#inner img {
display: block;
width:510px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
<a href="###"><img src="img/1.jpg"></a>
<a href="###"><img src="img/2.jpg"></a>
<a href="###"><img src="img/3.jpg"></a>
<a href="###"><img src="img/4.jpg"></a>
<a href="###"><img src="img/5.jpg"></a>
<a href="###"><img src="img/6.jpg"></a>
<a href="###"><img src="img/7.jpg"></a>
<a href="###"><img src="img/8.jpg"></a>
</div>
</div>
<p>
<button class="active">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
</p>
<script type="text/javascript">
//1.找节点
var buttonList = document.getElementsByTagName("button");
var inner = document.getElementById("inner");
var perWidth = inner.children[0].offsetWidth;
//2.加事件
// 1 ===> -510 * 0 px
// 2 ===> -510 * 1 px
// 3 ===> -510 * 2 px
// 4 ===> -510 * 3 px
// ...
// 9 ===> -510 * 8 px
// inner.style.left = ???? + "px";
for(var i = 0; i < buttonList.length; i++) {
buttonList[i].index = i;
buttonList[i].onclick = function() {
inner.style.left = -perWidth * this.index + "px";
for(var j = 0; j < buttonList.length; j++) {
buttonList[j].className = "";
}
this.className = "active";
}
}
</script>
</body>
</html>
