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


Posted in Javascript onJanuary 05, 2016

效果图如下所示:

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切换完整版(自动切换、鼠标移入停止、移开运行)的全部内容,希望大家喜欢。

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
简单的js计算器实现
Oct 26 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 #Javascript
javascript简单比较日期大小的方法
Jan 05 #Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 #Javascript
简述jQuery ajax的执行顺序
Jan 05 #Javascript
JavaScript类型系统之正则表达式
Jan 05 #Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 #Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 #Javascript
You might like
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
服务器web工具 php环境下
2010/12/29 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
javascript event 事件解析
2011/01/31 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
python 字符串格式化代码
2013/03/17 Python
Python入门篇之对象类型
2014/10/17 Python
Python线程详解
2015/06/24 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
python DataFrame 取差集实例
2019/01/30 Python
django 读取图片到页面实例
2020/03/27 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
大四学年自我鉴定
2013/11/13 职场文书
2014年党支部学习材料
2014/05/19 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
实习护士自荐信
2015/03/25 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Python源码解析之List
2021/05/21 Python
详解nginx进程锁的实现
2021/06/14 Servers