js简单手动（自动）切换

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Tab切换-自动</title><link type="text/css" rel="stylesheet" href="css/style.css"></head><body><div id="notice" class="notice"><div id="notice-tit" class="notice-tit" onMouseOver="tz();" onMouseOut="jx()"><ul><li class="select" onMouseOver="show(0)"><a href="#">公告</a></li><li onMouseOver="show(1)"><a href="#">规则</a></li><li onMouseOver="show(2)"><a href="#">论坛</a></li><li onMouseOver="show(3)"><a href="#">安全</a></li><li onMouseOver="show(4)"><a href="#">公益</a></li></ul></div><div id="notice-con" class="notice-con"><div class="mod" style="display:block"><ul><li><a href="#">张勇：要玩快乐足球</a></li><li><a href="#">阿里2000万驰援灾区！</a></li><li><a href="#">旅游宝让你边玩边赚钱</a></li><li><a href="#">多行跟进阿里信用贷款</a></li></ul></div><div class="mod" style="display:none"><ul><li><span>[<a href="#">通知</a>]</span><a href="#">"滥发"即将换新</a></li><li><span>[<a href="#">通知</a>]</span><a href="#">比特币严管啦！</a></li><li><span>[<a href="#">通知</a>]</span><a href="#">禁发商品名录！</a></li><li><span>[<a href="#">通知</a>]</span><a href="#">商品属性限制</a></li></ul></div><div class="mod" style="display:none"><ul><li><span>[<a href="#">聚焦</a>]</span><a href="#">金牌卖家再启航</a></li><li><span>[<a href="#">功能</a>]</span><a href="#">橱窗规则升级啦</a></li><li><span>[<a href="#">话题</a>]</span><a href="#">又爱又恨优惠劵 </a></li><li><span>[<a href="#">工具</a>]</span><a href="#">购后送店铺红</a></li></ul></div><div class="mod" style="display:none"><ul><li><a href="#">个人重要信息要管牢！</a></li><li><a href="#">卖家防范红包欺诈提醒</a></li><li><a href="#">更换收货地址的陷阱！</a></li><li><a href="#">注意骗子的技术升级了！</a></li></ul></div><div class="mod" style="display:none"><ul><li><a href="#">淘宝之行大众评审赢公益金</a></li><li><a href="#">爱心品牌联合征集</a></li><li><a href="#">名公益机构淘宝开店攻略</a></li><li><a href="#">走进无声课堂</a></li></ul></div></div></div>
<script>var div = document.getElementById("notice");var li = div.getElementsByTagName("div")[0].getElementsByTagName("li");var con = div.getElementsByTagName("div")[1].getElementsByClassName("mod");function show(v) {for (var j = 0; j < li.length; j++) {if(v==j){li[j].className = "select";showw(j);}else{li[j].className = "";}}}a=0;function showw(v) {for (var j = 0; j < con.length; j++) {if(v==j){con[j].style = "display:block";a=v;}else{con[j].style = "display:none";}}} function showww(){show(a%li.length);a++;}var time = setInterval("showww()",500);function tz(){window.clearInterval(time);}function jx(){time = setInterval("showww()",500);}
</script></body>
</html>

转载于:https://www.cnblogs.com/liu-heng/p/6826111.html

js简单手动（自动）切换相关推荐

html5轮播怎么自动换图,js实现轮播图效果纯js实现图片自动切换
本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片: 2. 鼠标离开,恢复自动播放: ...
AWS EC2手动/自动切换Elastic IP
一,手动切换Elastic IP 1,进入ec2控制台,选中实例然后操作->联网->管理IP地址 2进入分配Elastic IP页面,点击分配 3,分配Elastic IP 4,配置El ...
jquery，js实现手机端全屏轮播图手动滑动+自动切换(autoplay)
jquery,js实现手机端全屏轮播图使用了swiper插件,可手动滑动切换也可自动切换效果图 css代码只是作为参考,可以根据你自己的需求去改,这里我用的是上下两张背景图,图自行修改 html ...
JS实现轮播图（手动切换+自动切换两种方法）
1.轮播图效果图 2.完整代码如下 <!doctype html> <html> <head> <meta charset="utf-8" ...
自动切换IE代理设置：简单使用IE自动配置脚本
今天和一个朋友聊到了chrome的自动代理功能,很多人感觉这个功能非常方便,但大家或许不知道这个功能其实是继承自IE浏览器,而且在"遥远"的Windows 98时代IE就已经具有了 ...
html简单的图片切换js,一分钟让你学会如何使用js切换图片
利用js实现简单的动画效果 js简介 JavaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. Java ...
html图片自动切换的幻灯片效果的,js带点自动图片轮播幻灯片特效代码分享
本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:--- ...
用js实现点击切换+自动切换的轮播图
用js实现点击切换+自动切换的轮播图之前博主写过一篇用css实现轮播图的文章,可以看到用css实现的轮播图也能实现我们所需要的功能.那么这些功能用js该如何实现呢?我们一起来看下吧! (ps:博主在 ...
广告banner：手动滑动切换，自动切换，点击跳转，异步加载网络图片
效果图: 该banner功能有自动切换图片,点击图片可以自定义事件,手动滑动切换,异步加载图片代码说话: 布局文件: <FrameLayoutandroid ...

js简单手动（自动）切换

js简单手动（自动）切换相关推荐

最新文章

热门文章