图片_文字列表的滑动门特效_层和布局特效
图片+文字列表的滑动门，可以自动播放，绝对实用的特效，适用于大多数网站，它是文字列表与图片列表组合的滑动门，当您鼠标没有放上去的时候，它会自动循环播放，当鼠标放上的时候，它会切换为对应的内容。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网易图片轮换滑动门</title> <meta http-equiv="mrc-type" mrc="text/html;charset=gb2312"> <style type="text/css"> /* 全局CSS定义 */ body {text-align:center;serif; margin:0; padding:0; font-size:12px;} div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border:0; } h3{margin:0; padding:0; font-size:12px; font-weight:normal;} li{list-style-type:none;} .focusPic{width:730px; margin:0 auto; clear:both; text-align:center; padding:10px 0;} .focusPic .focusTitle{width:310px; float:right; font-size:14px; text-align:left;} .focusPic .focusTitle h3{margin:0 0 2px 10px; color:#666666;} .focusPic .focusTitle li{height:28px; line-height:28px; 1122123<img src=http://p1.mb5u.com/texiao/3/20100522231312312.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231312312.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231312312.gif) left 0 no-repeat; cursorointer; font-size:14px; padding-left:20px; margin:0 auto 0 10px; overflow:hidden;} .focusPic #focusMenu li.current{1122123<img src=http://p1.mb5u.com/texiao/3/20100522231312312.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231312312.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231312312.gif) left -29px no-repeat; font-weight:bold;} .focusPic .focusTitle li a.splogo,.focusPic .focusTitle li a:visited.splogo,.focusPic .focusTitle li a:hover.splogo{padding-right:20px; 1122123<img src=http://p1.mb5u.com/texiao/3/20100522231312313.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231312313.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231312313.gif) no-repeat right 0px;} .focusPic #focusLeft{width:420px; height:240px; overflow:hidden; float:left;} .focusPic #focusLeft li{display:none;} .focusPic #focusLeft li.current{display:block;} </style> </head> <body> <div class="focusPic"> <ul id="focusLeft"> <li class="current"><a href="http://mb5u.com"><img src="/jscss/demoimg/wall1.jpg" width="420" height="240" /></a></li> <li class=""><a href="/"><img src="/jscss/demoimg/wall2.jpg" width="420" height="240" /></a></li> <li class=""><a href="http://mb5u.com"><img src="/jscss/demoimg/wall3.jpg" width="420" height="240" /></a></li> <li class=""><a href="/"><img src="/jscss/demoimg/wall4.jpg" width="420" height="240" /></a></li> <li class=""><a href="http://mb5u.com"><img src="/jscss/demoimg/wall5.jpg" width="420" height="240" /></a></li> <li class=""><a href="/"><img src="/jscss/demoimg/wall6.jpg" width="420" height="240" /></a></li> <li class=""><a href="/"><img src="/jscss/demoimg/wall7.jpg" width="420" height="240" /></a></li> <li class=""><a href="/"><img src="/jscss/demoimg/wall8.jpg" width="420" height="240" /></a></li> </ul> <div class="focusTitle"> <h3>mb5u.com 最新源代码</h3> <ul id="focusMenu"> <li class="current"><a href="/soft/4731.shtml" target="_blank">ASP 树形菜单TreeView 多样式版</a></li><li><a href="/soft/4728.shtml" target="_blank">网页右上角卷边的Flash书角广告代码</a></li><li><a href="/soft/3769.shtml" target="_blank">EyeOS ajax+php个人信息管理系统</a></li><li><a href="/soft/4717.shtml" target="_blank">LeadBBS ASP轻型论坛 v6.0</a></li><li><a href="/soft/4714.shtml" target="_blank">jQuery 手风琴折叠菜单（含教程）</a></li><li><a href="/soft/4713.shtml" target="_blank">Prototype 进度条插件 jsProgressBarHandler</a></li><li><a href="/soft/4708.shtml" target="_blank">VB仿QQ截屏核心代码</a></li><li><a href="/soft/2426.shtml" target="_blank">落伍PHP分类信息程序 v2.0</a></li> </ul> </div> <div style="clear:both;"></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, mrcs, css, eventName, interval) { var curSeq = 0, length = mrcs.length, timerIds = [], isStopped; if (menus && length != menus.length) { throw new Error("the amount of menus and mrcs is not equal"); } var hide = function(seq) { removeClass(mrcs[seq], css); if (menus) { removeClass(menus[seq], css); } }; var show = function(seq) { addClass(mrcs[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", 10000); //]]> </script> </div> </body> </html>
。