JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行）

时间：2021-05-26

效果图如下所示：

废话不多说了，直接给大家贴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;}#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切换完整版(自动切换、鼠标移入停止、移开运行）的全部内容，希望大家喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章