图片+文字列表的滑动门，可以自动播放

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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="content-type" content="text/html;charset=gb2312">
<style type="text/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; background:url(//ku.shouce.ren/files/images/201601/56a31a21c8631.gif) left 0 no-repeat; cursorointer; font-size:14px; padding-left:20px; margin:0 auto 0 10px; overflow:hidden;}
.focusPic #focusMenu li.current{background:url(//ku.shouce.ren/files/images/201601/56a31a21c8631.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; background:url(//ku.shouce.ren/files/images/201601/56a31a22e7163.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="#"><img src="//ku.shouce.ren/files/images/201601/56a31a23a775b.jpg" width="420" height="240" /></a></li>
    <li class=""><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a31a2488ae5.jpg" width="420" height="240" /></a></li>
    <li class=""><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a31a26b5ebc.jpg" width="420" height="240" /></a></li>
    <li class=""><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a31a2770de1.jpg" width="420" height="240" /></a></li>
    <li class=""><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a31a284f638.jpg" width="420" height="240" /></a></li>
    <li class=""><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a31a28e0029.jpg" width="420" height="240" /></a></li>
    <li class=""><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a31a2c3b4e8.jpg" width="420" height="240" /></a></li>
    <li class=""><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a31a2dbf372.jpg" width="420" height="240" /></a></li>
  </ul>
  <div class="focusTitle">
    <h3>最新源代码</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, 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", 10000);
//]]>
</script>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

图片+文字列表的滑动门，可以自动播放

分类

表格图层

描述

图片+文字列表的滑动门，可以自动播放，绝对实用的特效，适用于大多数网站，它是文字列表与图片列表组合的滑动门，当您鼠标没有放上去的时候，它会自动循环播放，当鼠标放上的时候，它会切换为对应的内容。