首頁 > 開發者 > JavaScript
JavaScript、tab切換完整版(自動切換、滑鼠移入停止、移開運行），javascripttab
如下所示：
廢話不多說了，直接給大家貼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">//擷取節點var btnList = document.getElementsByTagName("button");var inner = document.getElementById("inner");//可見寬度var perWidth = inner.children[0].offsetWidth;//添加事件//迴圈呼叫事件封裝成函數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("滑鼠移入");clearInterval(timer);}inner.onmouseout = function() {// alert("滑鼠移出");timer = setInterval(prom,2000);}</script></body></html>
以上代碼是給大家分享的JavaScript、tab切換完整版(自動切換、滑鼠移入停止、移開運行）的全部內容，希望大家喜歡。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
