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延迟加载
Mar 09 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
javascript中json基础知识详解
Jan 19 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
JS正则表达式常见函数与用法小结
Apr 13 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
教你如何使用php session
2013/10/28 PHP
PHP调用其他文件中的类
2018/04/02 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
微信小程序实现图片上传
2019/05/23 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Django models filter筛选条件详解
2020/03/16 Python
python中upper是做什么用的
2020/07/20 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
精细化工应届生求职信
2013/11/17 职场文书
大学生先进事迹材料
2014/02/16 职场文书
幼儿园小班评语
2014/04/18 职场文书
公司承诺书怎么写
2014/05/24 职场文书
应届生求职信范文
2014/05/26 职场文书
教师工作失职检讨书
2014/09/18 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
新员工辞职信范文
2015/05/12 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
如何基于python实现单目三维重建详解
2022/06/25 Python