这是近来门户们都喜欢用的特效，左侧是一个大图片，右侧是对应文字，鼠标移动时，对应行的文字会变化，图片也相应的切换，如果没有鼠标动作时，它会自己播放，播放时间可调整，个人感觉挺不错的导航效果。
运行效果截图如下：
在线演示地址如下：
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><p 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><p 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></p><p class="clear"></p></p><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视频教程！