本文實例講述了JS實現的文字與圖片定時切換效果代碼。分享給大家供大家參考。具體如下：
這是近來門戶們都喜歡用的特效，左側是一個大圖片，右側是對應文字，鼠標移動時，對應行的文字會變化，圖片也相應的切換，如果沒有鼠標動作時，它會自己播放，播放時間可調整，個人感覺挺不錯的導航效果。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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程序設計有所幫助。
新聞熱點
疑難解答
