帝王谷资源网 Design By www.wdxyy.com
本文实例讲述了JS实现的文字与图片定时切换效果代码。分享给大家供大家参考。具体如下:
这是近来门户们都喜欢用的特效,左侧是一个大图片,右侧是对应文字,鼠标移动时,对应行的文字会变化,图片也相应的切换,如果没有鼠标动作时,它会自己播放,播放时间可调整,个人感觉挺不错的导航效果。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-txt-pic-time-cha-tab-codes/
具体代码如下:
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文字与图片切换</title> <style> *{margin:0;padding:0;border:0;list-style:none} .focusPic{width:500px; margin:0 auto; clear:both; text-align:center; border:1px solid #ccc;} .focusPic .focusTitle{width:240px;float:right; font-size:14px; text-align:left;} .focusPic .focusTitle li{height:28px; line-height:28px; cursor:pointer; font-size:12px; padding-left:10px; } .focusPic .focusTitle li a ,.focusPic .focusTitle li a:visited { color:#000;} .focusPic .focusTitle li a:hover {color:#bc2931;} .focusPic .focusTitle .current a ,.focusPic .focusTitle .current a:visited { color:#bc2931;} .focusPic .focusTitle .current a:hover {color:#bc2931;} .focusPic #focusMenu li.current{background:#efefef;font-weight:bold;color:#bc2931;} .focusPic #focusLeft{width:250px;overflow:hidden; float:left;background:#efefef;font-size:14px;line-height:100px;font-weight:bold;height:168px;} .focusPic #focusLeft li{display:none;} .focusPic #focusLeft li.current{display:block;} </style> </head> <body> <div class="focusPic"> <ul id="focusLeft"> <li class="current">VB在线出题考试系统</li> <li>jQuery 仿iGoogle 主页模块拖动</li> <li>jQuery UI 官方实例集</li> <li>VB在线出题考试系统</li> <li>小妖ASP投票调查系统 v4.0</li> <li>jQuery 带动画的日期选择插件</li> </ul> <div class="focusTitle"> <ul id="focusMenu"> <li class="current"><a href="#">VB在线出题考试系统</a></li> <li><a href="#" target="_blank">jQuery 仿iGoogle 主页模块拖动</a></li> <li><a href="#" target="_blank">jQuery UI 官方实例集</a></li> <li><a href="#" target="_blank">VB在线出题考试系统(MSSQL)</a></li> <li><a href="#" target="_blank">小妖ASP投票调查系统 v4.0</a></li> <li><a href="#" target="_blank">jQuery 带动画的日期选择插件</a></li> </ul> </div> <div class="clear"></div> </div> <script language="javascript" type="text/javascript"> //<![CDATA[ var $ = function(id) { return document.getElementById(id); }; Function.prototype.bind = function() { if (arguments.length < 2 && arguments[0] == null) { return this; } var __method = this, args = $A(arguments), object = args.shift(); return function() { return __method.apply(object, args.concat($A(arguments))); }; }; var isArray = function(testVar) { return Array == testVar.constructor " " + elem.className + " ").indexOf(" " + className + " ") == -1) { if (elem.className == "") { elem.className = className; } else { elem.className += (" " + className); } } }; var removeClass = function(elem, className) { var newClass = (" " + elem.className + " ").replace(" " + className + " ", " "); elem.className = newClass.substr(1, newClass.length - 2); }; var addEvent = function(elem, eventName, handler) { if (elem.addEventListener) { elem.addEventListener(eventName, handler, false); } else if (elem.attachEvent) { elem.attachEvent("on" + eventName, handler); } }; function Slide(menus, contents, css, eventName, interval) { var curSeq = 0, length = contents.length, timerIds = [], isStopped; if (menus && length != menus.length) { throw new Error("the amount of menus and contents is not equal"); } var hide = function(seq) { removeClass(contents[seq], css); if (menus) { removeClass(menus[seq], css); } }; var show = function(seq) { addClass(contents[seq], css); if (menus) { addClass(menus[seq], css); } curSeq = seq; }; this.showNext = function() { var next = curSeq + 1; if (next >= length) { next = 0; } var i = length; while (--i >= 0) { if (i != next) { hide(i); } else { show(i); } } }; this.change = function(event) { if (this != menus[curSeq]) { var i = length; while (--i >= 0) { if (menus[i] != this) { hide(i); } else { show(i); } } } e = window.event || event; e.cancelBubble = true; }; this.play = function(speed) { isStopped = false; timerIds.push(setInterval(this.showNext.bind(this), speed)); }; this.pause = function() { isStopped = true; var i = length; while (--i >= 0) { clearInterval(timerIds[i]); timerIds.splice(i, 1); } }; var i = length; while (--i >= 0) { addEvent(menus[i], eventName, this.change.bind(menus[i])); if (interval > 0) { addEvent(menus[i], "mouseover", this.pause); addEvent(menus[i], "mouseout", this.play.bind(this, interval)); } } if (interval > 0) { this.play(interval); } } var focusImg = new Slide($("focusMenu").getElementsByTagName("li"), $("focusLeft").getElementsByTagName("li"), "current", "mouseover", 3000); //]]> </script> </body>
希望本文所述对大家的JavaScript程序设计有所帮助。
标签:
JS,文字,图片,定时切换
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月30日
2024年10月30日
- 独朵莉亚一人T0,杨玉环配草灵太强
- 骗子酒馆新手怎么玩 骗子酒馆新手攻略分享2024
- 沙威玛传奇沙威玛怎么做 沙威玛制作方法
- 陈洁冰《夜来香》中国老歌二胡发烧天碟[WAV+CUE]
- 董育君2014-新歌[美乐帝][WAV+CUE]
- 如鸢密探强度榜一览 密探养成推荐
- 骗子酒馆怎么玩 骗子酒馆游戏规则和必胜技巧分享
- 《模拟城市:我是市长》万圣奇遇版本登录苹果AppStore
- 群星-戏剧经典[台湾首版]3CD[WAV+CUE]
- 骗子酒馆游戏有哪些角色 骗子酒馆游戏角色图鉴一览
- 彻底结束了!索尼关停《星鸣特攻》开发商
- 《荒野大镖客》Steam特别好评 玩家:不是暴力移植!
- Digital Foundry大赞《龙腾世纪4》优化:多年来最好的3A级PC游戏
- 卡普空经典三上真司游戏《杀手7》正在被“差评轰炸”
- 《流放之路2》又跳票!因服务器搭建问题推迟至12月