使用图片进行点击切换效果
<!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; 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>
然后我想给它加个定时自动走的效果，代码如下：
<script type="text/javascript">
//1.找节点
var buttonList = document.getElementsByTagName("button");
var inner = document.getElementById("inner");
var perWidth = inner.children[0].offsetWidth;
function tab() {
inner.style.left = - perWidth * index + "px";
for(var j = 0; j < buttonList.length; j++) {
buttonList[j].className = "";
}
buttonList[index].className = "active";
}
for(var i = 0; i < buttonList.length; i++) {
buttonList[i].index = i;
buttonList[i].onclick = function() {
index = this.index;
tab();
}
}
var index = 0;
setInterval(function() {
index ++;
if(index > buttonList.length - 1) {
index = 0;
}
tab();
},5000);
</script>