html----选项卡自动切换以及鼠标悬停时停止（js）

效果：

三秒自动切换

鼠标指到哪个，立即停止自动切换，并换到鼠标指的那个，停止不动！

代码以及详细注释

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选项卡</title><style type="text/css">/*清除样式*/*{margin: 0;padding: 0; font-size: 24px;}ul{list-style: none;}/*选项卡总体*/.tab_box{width: 804px;height: 350px;margin: 20px auto;border:1px solid #ccc;}/*头部导航样式*/.tab_head{height: 101px;}.tab_head_div{float: left;width: 200px;height: 100px;text-align: center;line-height: 100px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background: rgba(204, 204, 204, 0.26);}/*导航选项最后一个不要右边框*/.tab_head_div_r{border-right: none;}/*选项卡——内容*/.tab_con{width: 750px;height: 240px;margin: 20px auto;}/*内容里面ul全部设置隐藏*/.tab_con_ul{display: none;}.tab_con_ul li{margin: 10px 10px;}/*鼠标移到的变化  显示ul*/.tab_con .current{display: block;}/*鼠标移到的变化 更改导航样式*/.tab_head .current{background: #fff;border-bottom: none;cursor: pointer;/*鼠标变成小手*/}</style>
</head>
<body>
<div class="tab_box"><div class="tab_head" id="tab_head"><div class="tab_head_div current">公司动态</div><div class="tab_head_div">开学典礼</div><div class="tab_head_div">学员感言</div><div class="tab_head_div tab_head_div_r">学员故事</div></div><div class="tab_con" id="tab_con"><ul class="tab_con_ul current"><li>网络营销课程钜惠5000元，只剩最后10天</li><li>《传智特刊》开年任性大改版,第22期炫酷上线</li><li>2014版传智播客PHP学习路线图霸气上线</li><li>IT教师的福音,专教技术干货的大学教材震撼首发</li></ul><ul class="tab_con_ul"><li>且行且珍惜，退伍兵钟爱传智播客</li><li>听听学员讲述传智播客跟其他机构的对比</li><li>基础班学员为新学员指点迷津</li><li>女汉纸背后的故事：试听课上被老师折服</li></ul><ul class="tab_con_ul"><li>用汗水证明这是传智播客的时代</li><li>瓦工的“程序员”梦</li><li>iOS学习之路,撑起我的成长梦想</li></ul><ul class="tab_con_ul"><li>一个让老程序员都汗颜的应届生</li><li>草根学员从求知走向岗位的蜕变故事</li><li>我与编程的“爱恨情仇”</li><li>狂风暴雨之后才是最灿烂的彩虹</li></ul></div>
</div>
<script type="text/javascript">var head_divs=document.getElementById("tab_head").getElementsByTagName("div");var len=head_divs.length;/*索引值  大小是从0-3*/var current_index=0;/*计时器  每隔三秒执行一次autoChange函数*/var timer=window.setInterval(autoChange,3000);/*为每个div添加鼠标事件*/for(var i=0;i<len;i++){/*移入事件*/head_divs[i].onmouseover=function () {/*清除定时器*/clearInterval(timer);/*获取所有ul*/var con_uls=document.getElementById("tab_con").getElementsByTagName("ul");/*循环 先把所有ul和所有head_div设置为普通样式*/for(var j=0;j<len;j++){head_divs[j].className=head_divs[j].className.replace(" current","");con_uls[j].className=con_uls[j].className.replace(" current","");/*遇到当前鼠标指着的位置  设置其样式为变化样式*/if(head_divs[j]==this){head_divs[j].className+=" current";con_uls[j].className+=" current";}}}/*移出事件 恢复定时器  自动切换*/head_divs[i].onmouseout=function () {timer=setInterval(autoChange,3000);}}function autoChange() {/*索引值自加*/++current_index;/*如果索引大于导航个数（等于len也就是大于总个数） 清零*/if(current_index==len){current_index=0;}/*获取全部ul*/var con_uls=document.getElementById("tab_con").getElementsByTagName("ul");for(var i=0;i<len;i++){/*遍历 清除所有变化 都恢复为普通样式*/con_uls[i].className=con_uls[i].className.replace(" current","");head_divs[i].className=head_divs[i].className.replace(" current","");/*索引值代表当前位置 为当前位置设置变化*/if(head_divs[i]==head_divs[current_index]){head_divs[i].className+=" current";con_uls[i].className+=" current";}}}
</script>
</body>
</html>

html----选项卡自动切换以及鼠标悬停时停止（js）相关推荐

《Unity开发实战》——3.9节鼠标悬停时高亮显示材质
本节书摘来自华章社区<Unity开发实战>一书中的第3章,第3.9节鼠标悬停时高亮显示材质,作者 (爱尔兰)Matt Smith (巴西)Chico Queiroz,更多章节内容可以访问云 ...
css 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像？
英文 | https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/?ref=rp翻译 | web前端开发 ...
JavaScript+Css实现的鼠标悬停时动态翻滚的紫色菜单导航
代码简介: 鼠标悬停时动态翻滚的导航条,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 代码内容: <!DOCTYPE html PUBLIC " ...
html5鼠标悬停图片放大的原理,jQuery当鼠标悬停时放大图片的效果实例
这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HT ...
CSS文字超出部分用省略号代替，js鼠标悬停时显示全部文本
需求: 宽度为百分比,随浏览器变化而变化,当窗口变小到一定程度,文字超出部分用省略号代替,当文字出现省略号,需要鼠标悬停时显示全部文本. 文字超出部分用省略号代替 width:overflow: hi ...
js,jq表格/文本内容溢出，用三个点替代，鼠标悬停时显示全部内容
项目中遇到如果表格内容太多的话页面会很丑,所以想到给表格一个最大宽度之类的,当内容超出时用三个点代替超出的部分,当鼠标悬停时显示全部的信息,下面百度到两个案例,都可以实现: 1.在表格下面在添加一模一 ...
基于jQuery的鼠标悬停时放大图片的效果制作
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
table 鼠标悬停时高亮背景颜色的修改 .el-table tbody tr:hover>td { background-color: #颜色 } 或 .el-table__body-wrap ...
在div 鼠标悬停时改变滚定条样式
通过改变滚动条颜色来实现div 鼠标悬停时显示滚动条小方块 .panel-cont::-webkit-scrollbar {/*滚动条整体样式*/width: 6px; /*高宽分别对应横竖滚动条的 ...
利用伪元素给图片在鼠标悬停时添加背景图片
利用伪元素给图片在鼠标悬停的时候添加背景图片,这种效果在电影网站上使用的比较频繁,主要是鼠标悬停的时候显示出播放的图标,点击图片链接后就会进入视频详情页面,而使用伪元素是为了使我们的html代码更加简 ...

html----选项卡自动切换以及鼠标悬停时停止（js）

效果：

三秒自动切换

鼠标指到哪个，立即停止自动切换，并换到鼠标指的那个，停止不动！

代码以及详细注释

html----选项卡自动切换以及鼠标悬停时停止（js）相关推荐

最新文章

热门文章