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

作者：Cakty、Riven 时间：2024-04-22 22:36:28　

效果图如下所示：

废话不多说了，直接给大家贴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;
//添加事件
//循环调用事件包装成函数tab
function 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切换完整版(自动切换、鼠标移入停止、移开运行）的全部内容，希望大家喜欢。

标签：javascript,tab,切换

投稿

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

猜你喜欢

pytorch--之halfTensor的使用详解

使用Oracle的Decode函数进行多值判断

mysql 8.0.22 winx64安装配置方法图文教程

Python实战项目之MySQL tkinter pyinstaller实现学生管理系统

MDF文件在SQL Server中的恢复技术

OpenCV实现直线检测

golang原生实现JWT的示例代码

Python机器学习工具scikit-learn的使用笔记

pycharm-professional-2020.1下载与激活的教程

django 发送邮件和缓存的实现代码

MySQL 的 21 个规范、优化最佳实践！

Qt数据库应用之实现通用数据生成器

PyCharm代码格式调整方法

asp数字或者字符排序函数代码

Python之Pygame的Event事件模块

python对文档中元素删除,替换操作

Python 获取指定开头指定结尾所夹中间内容(推荐)

JS关于刷新页面的相关总结

利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法

Python Tkinter GUI编程实现Frame切换