JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行）
作者：Cakty、Riven 发布时间：2024-04-22 22:36:28
标签：javascript,tab,切换
效果图如下所示：
废话不多说了，直接给大家贴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切换完整版(自动切换、鼠标移入停止、移开运行）的全部内容，希望大家喜欢。
0
投稿猜你喜欢
1.为conda配置清华源打开cmd输入以下命令：conda config --add channels https://mirrors.t- 一、map函数作用：map主要作用是计算一个序列或者多个序列进行函数映射之后的值语法：map(function,iterable1,iter
- 目录前言算法原理目标函数算法流程 Python实现总结前言K-Means 是一种非常简单的聚类算法(聚类算法都属于无监督学习)。给
- 1. Django: Python Web应用开发框架Django 应该是最出名的Python框架，GAE甚至Erlang都有框架受它影响。
- 本文实例讲述了MySQL查询条件常见用法。分享给大家供大家参考，具体如下：条件使用where子句对表中的数据筛选，结果为true的行会出现在
- 可以直接参考官方文档：https://docs.microsoft.com/zh-cn/sql/linux/quickstart-insta
- jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的J&
- 一、前言使用过Python的同学们一定被她的各种编码问题缠绕过，因为平常维护的新老项目跨越 2、3两个版本，编码问题有时更是让我苦不堪言，遂
- 插入数据MySQL 表中使用 INSERT INTO SQL语句来插入数据。你可以通过 mysql> 命令提示窗口中向数据表中插入数据
- 前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。作者：黑白之道刮刮
- 1.创建数据库启动命令行，通过输入如下命令打开Shell模式的CLP:sqlite3 test.db虽然我们提供了数据库名称，但如果该数据库
- 先了解如何利用python语言实现以平面和标记物进行姿态估计本实验只是先实现一个简单的小例子。简单来说就是先识别出图像中的参考面，再拍摄一张
- 1 慢查询定义指mysql记录所有执行超过long_query_time参数设定的时间阈值的SQL语句。慢查询日志就是记录这些sql的日志。
- 一、在 VS Code 中配置调试使用 Vue CLI 2搭建项目时：更新 config/index.js 内的 devtool prope
- 文件拆分代码：#-*-encoding:utf-8-*-import osimport sysimport threadingdef get
- 问题描述有时候，产品让我们做的表格，会有合并列的功能，但是官方的demo略有不清晰，本文举个例子简述之。我们先看下效果图：假设产品的需求是这
- 现在Web页面的交互方式越来越多样化，其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决，一个是事件的注册方式，一般
- 查询学生步骤1：设置导航 步骤2：添加路由步骤3：创建页面步骤：步骤1：准备2个变量（pageInfo、studentVo）步骤2
- mytop类似于linux top工具，可以实时监控mysql服务器的性能信息。 安装方法 1、安装依赖 # cpan # cpan >
- 本文实例为大家分享了python实现学生通讯录管理系统的具体代码，供大家参考，具体内容如下功能模块分析：1.首页（菜单功能）2.添加学生3.
