效果圖如下所示：
廢話不多說(shuō)了，直接給大家貼js代碼了.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>table切換</title><style type="text/css">*{padding: }button{width: 95px;}.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;}#main{text-align: center;}</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></div></div><div id="main"><button class="active">1</button><button>2</button><button>3</button><button>4</button><button>5</button></div><script type="text/javascript">//獲取節(jié)點(diǎn)var btnList = document.getElementsByTagName("button");var inner = document.getElementById("inner");//可見寬度var perWidth = inner.children[0].offsetWidth;//添加事件//循環(huán)調(diào)用事件包裝成函數(shù)tabfunction tab(){inner.style.left = -perWidth * this.index + "px";for(var j = 0; j < btnList.length; j++) {btnList[j].className = "";}btnList[index].className = "active";}for(var i = 0; i < btnList.length; i++) {btnList[i].index = i;btnList[i].onclick = function() {index=this.index;tab();}}var index =0;function prom(){index ++;if(index > btnList.length-1){index = 0;}tab();}var timer = setInterval(prom,2000);inner.onmouseover = function() {// alert("鼠標(biāo)移入");clearInterval(timer);}inner.onmouseout = function() {// alert("鼠標(biāo)移出");timer = setInterval(prom,2000);}</script></body></html>以上代碼是給大家分享的JavaScript、tab切換完整版(自動(dòng)切換、鼠標(biāo)移入停止、移開運(yùn)行）的全部?jī)?nèi)容，希望大家喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
