Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.111cn.net/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS imitation 2010 World Expo Home Page Focus flash</title><style type="text/css">* {Border: 0; margin: 0; border: 0; list-style: none;} body {padding: 20px; background: # eee ;}. wrap {padding: 4px; border: 1px solid # ccc; background: # fff; float: left ;}# focus_change {width: 280px; height: 350px; position: relative; overflow: hidden; font-family: Verdana, Arial, Helvetica, sans-serif; background: # fff ;}/ * the entire frame size can be changed at will, can add border as needed */# loading {position: absolute; z-index: 9999; width: 280px; height: 350px; background: # fff url (http://nethd.zhongsou.com/wtimg/ I _158290/15250-loading.gif) center-40px no-repeat; color: #666; font-size: 12px; text-align: center; padding-top: 90px ;}# ts_bg {position: absolute; bottom: 0; z-index: 1; width: 280px; height: 36px; background: #000; filter: alpha (opacity = 50); opacity: 0.5 ;} # pics li {position: absolute; top: 0px; left: 0px;} # pics li img {filter: alpha (opacity = 0); opacity: 0; width: 280px; height: 350px;}/* the image size is consistent with the frame size */# ts li {position: absolute; z-index: 2; left: 0; bottom:-32px; width: 100%; height: 32px; line-height: 32px; overflow: hidden; text-align: center; font-size: 14px; font-weight: bold ;} # ts li a {color: # fff; text-decoration: none;}/* title link style */# btn, # btn_bg {position: absolute; z-index: 3; bottom: 40px; right: 0px; color: # fff; font-size: 12px;} # btn li, # btn_bg li {float: left; width: 22px; height: 18px; line-height: 18px; overflow: hidden; text-align: center; margin-right: 4px; border: 1px solid #999 ;}# btn_bg li {background: #000; filter: alpha (opacity = 60); opacity: 0.6;} # btn li. current {border: 1px solid # F60; color: # F60 ;}</style><script type="text/javascript">/* Design by koen @ 10nian5yue8ri * // * http://hi.baidu.com/koen_li#/function $ (id) {return document. getElementById (id);} function $ (tag, id) {return (id = undefined? Document: this. $ (id )). getElementsByTagName (tag);} function poptit (tsID, n) {// text upper and lower Motion function var ts =$ ('Lil', tsID); var setway = function (obj, y) {obj. style. bottom = y + 'px ';} var getway = function (obj) {return parseInt (obj. style. bottom);} var up = function () {if (ts [n]. movement) clearTimeout (ts [n]. movement); // for compatibility with changes, click if (y1 = 0) return true; y1 + = Math. ceil (0-y1)/5); setway (ts [n], y1); if (y1 <0) ts [n]. movement = setTimeout (up, 1);} var down = function () {if (ts [N]. movement) clearTimeout (ts [N]. movement); if (y2 =-32) return true; y2 + = Math. floor (-32-y2)/5); setway (ts [N], y2); if (y2>-32) ts [N]. movement = setTimeout (down, 1) ;}for (var I = 0; I<ts.length;i++){if (!ts[i].style.bottom) ts[i].style.bottom = "-32px";if(ts[i].name=='up') var N=i;}if(!N&&n==0) {//开始载入...ts[n].name='up';var y1=getway(ts[n]);up();return true;} if(N==n) return true;//防止快速移出移入的抖动ts[N].name=''//标记淡入的name为空ts[n].name='up';var y1=getway(ts[n]);var y2=getway(ts[N]);down();up();}function opa(pics,n){//图片淡入淡出函数var pics = $$('img',pics);var setfade=function(obj,o){if (document.all) obj.style.filter = "alpha(opacity=" + o + ")";else obj.style.opacity = (o / 100);};var getfade=function(obj){return (document.all)?((obj.filters.alpha.opacity)?obj.filters.alpha.opacity:false):((obj.style.opacity)?obj.style.opacity*100:false);}var show=function(){if(pics[n].move) clearTimeout(pics[n].move);if (o1 == 100) return true;o1+=5;setfade(pics[n],o1);if(o1<100) pics[n].move=setTimeout(show,1);};var hide=function(){if(pics[N].move) clearTimeout(pics[N].move);if (o2 == 0) return true;o2-=5;setfade(pics[N],o2);if(o2>0) pics [N]. move = setTimeout (hide, 1) ;}; for (var I = 0; I<pics.length;i++){if(!getfade(pics[i])) setfade(pics[i],0);if(pics[i].name=='out') var N=i;}if(!N&&n==0) {//开始载入...pics[n].name='out';var o1=getfade(pics[n]);show();return true;}if(N==n) return true;pics[N].name=''pics[n].name='out';var o1=getfade(pics[n]);var o2=getfade(pics[N]);hide();show();}function classNormal() {//数字标签样式清除 var focusBtnList = $$('li','btn'); for (var i = 0; i < focusBtnList.length; i++) { focusBtnList[i].className = ''; }}function autoFocusChange() {//自动运行 if (atuokey) return; var focusBtnList = $$('li','btn'); for (var i = 0; i < focusBtnList.length; i++) { if (focusBtnList[i].className == 'current') { var currentNum = i; } }if(currentNum<focusBtnList.length-1){poptit('ts',currentNum+1);opa('pics',currentNum+1); classNormal(); focusBtnList[currentNum+1].className = 'current';}else if(currentNum==focusBtnList.length-1){poptit('ts',0);opa('pics',0); classNormal(); focusBtnList[0].className = 'current';}}function focusChange() {//交互切换 var focusBtnList = $$('li','btn'); for (var i = 0; i < focusBtnList.length; i++) {focusBtnList[i].I=i;focusBtnList[i].onclick = function(){ poptit('ts',this.I);opa('pics',this.I); classNormal(); focusBtnList[this.I].className = 'current';}focusBtnList[i].onmouseover = function(){this.style.backgroundColor='#f60';this.style.cursor='pointer';}focusBtnList[i].onmouseout = function(){this.style.backgroundColor='';}}}var atuokey = '';function init(){//初始化$('btn_bg').innerHTML=$('btn').innerHTML;$('focus_change').removeChild($$('div','focus_change')[0]);poptit('ts',0);opa('pics',0); classNormal(); $$('li','btn')[0].className = 'current';$('focus_change').onmouseover = function() { atuokey = true;clearInterval(auto); } $('focus_change').onmouseout = function() { atuokey = false;auto=setInterval('autoFocusChange()', T); }}var T=3000;//每帧图片停留的时间，1000=1秒var auto='';window.onload=function(){init();focusChange();auto=setInterval('autoFocusChange()', T);}</script></head><body><div class="wrap"><div id="focus_change"><div id="loading">Please wait...</div><div id="ts_bg">Text title background</div><div id="btn_bg">Digital tag background</div><div id="pics"><ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div><div id="ts"><ul> <li>Easy to use, you only need to modify the html content and style</li> <li>Custom frame (image) size, title of course adjustable</li> <li>You can also add more frames/images without modifying the JS code.</li> <li>Is it too easy to use?</li> <li>Comments, suggestions, and improvements are welcomed.</li> <li>Welcome to watching, learning, and imitating</li> </ul></div><div id="btn"><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul></div></div></div></body></html>
Tip: you can modify some code before running
