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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
javascript事件模型实例分析
Jan 30 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
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的一些基础知识分享
2011/07/27 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
javascript 快速排序函数代码
2012/05/30 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
深入理解Angularjs 脏值检测
2018/10/12 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
python中循环语句while用法实例
2015/05/16 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
什么是属性访问器
2015/10/26 面试题
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
五年级语文教学反思
2014/01/30 职场文书
婚礼秀策划方案
2014/05/19 职场文书
施工安全承诺书
2014/05/22 职场文书
语文课外活动总结
2014/08/27 职场文书
教师岗位职责
2015/02/03 职场文书
建议书格式
2015/02/04 职场文书
刮痧观后感
2015/06/05 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
Python实现数据的序列化操作详解
2022/07/07 Python