JS实现的文字与图片定时切换效果代码

本文实例讲述了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 ? 1 : String ！= testVar.constructor && null ！= testVar.length && ！testVar.alert && ！testVar.nodeType ? 2 : 0;};var $A = function（variable） { switch （isArray（variable）） {case 1: return variable;case 2: var arr = [], i = -1, len = variable.length; while （++i < len） {arr[i] = variable[i]; } return arr;default: return [variable]; }};var addClass = function（elem, className） { if （（" " + 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程序设计有所帮助。