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 相关文章推荐
jquery validate使用攻略 第四步
Jul 01 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
深入浅出了解Node.js Streams
May 27 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获取数组中重复最多的元素的实现方法
2014/11/11 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
javascript 闭包疑问
2010/12/30 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
JS重要知识点小结
2011/11/06 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
原生js实现分页效果
2020/09/23 Javascript
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
大学生秋游活动方案
2014/02/17 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
介绍信模板
2015/01/31 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android