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压缩混淆工具
May 16 Javascript
用javascript来实现动画导航效果的代码
Dec 16 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
如何在JavaScript中正确处理变量
Dec 25 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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
javascript事件模型代码
2007/07/01 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python解析json代码实例解析
2019/11/25 Python
Python实现点云投影到平面显示
2020/01/18 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
4s店市场专员岗位职责
2014/04/09 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
中秋客户感谢信
2015/01/22 职场文书