漂亮的JS仿2010世博会主页焦点flash（5.13更新）

发布于: 2010-05-14 浏览: 2820 分类: Js/Css/jQuery

不知大家发现没有，最近腾讯有关的网站焦点flash都是类似2010上海世博主页的那种格式，而且百度贴吧主页也做成了这样的格式，貌似很流行哦？。。遗憾的是它们都是flash做的，或是基于jquery库/IE滤镜(只模仿了渐变)，找遍网络好像都找不到我想要的JS格式，只好自己动手做一个。看效果（已更新，共3款）：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://hi.baidu.com/koen_li">
<title>JS仿2010世博会主页焦点flash V2.1</title>
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{padding:20px;background:#eee;}
#myFocus{width:450px;height:296px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;background:#fff;}/*焦点图大小，可按需要是否加边框*/
#myFocus .loading{position:absolute;z-index:9999;width:450px;height:296px;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;}/*载入画面*/
#myFocus .pics li{position:absolute;top:0px;left:0px;}
#myFocus .pics li img{filter:alpha(opacity=0);opacity:0;width:450px;height:296px;}/*图片大小*/
#myFocus .ts li{position:absolute;z-index:2;left:0;bottom:-32px;height:32px;line-height:32px;padding-left:16px;overflow:hidden;}
#myFocus .ts li a{color:#fff;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
#myFocus .tsBg{position:absolute;bottom:0;z-index:1;width:450px;height:36px;background:#000;filter:alpha(opacity=40);opacity:0.4;}/*标题背景*/
#myFocus .btn,#myFocus .btnBg{position:absolute;z-index:3;bottom:8px;right:8px;color:#fff;font-size:12px;}/*按钮样式*/
#myFocus .btn li,#myFocus .btnBg li{float:left;width:22px;height:18px;line-height:18px;overflow:hidden;text-align:center;margin-right:1px;cursor:pointer;}
#myFocus .btnBg li{background:#fff;filter:alpha(opacity=50);opacity:0.5;}/*按钮背景*/
#myFocus .btn li.current,#myFocus .btn li.hover {background:#F60;}/*当前/悬停按钮背景*/
</style>
<script type="text/javascript">
/*design by koen @ 10nian5yue8ri*/
/*http://hi.baidu.com/koen_li*/
function setMyFocus(ID,t){//主函数...
function $(id) {return document.getElementById(id);}
function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);}
function poptit(n){//文字上下运动函数
	var ts = $$('li',tit);
	var H = ts[n].clientHeight;
	var setway=function(obj,y){obj.style.bottom=y+'px';}
	var getway=function(obj){return parseInt(obj.style.bottom);}
	var y1,y2;
	var up=function(){
		y1=getway(ts[n]);
		if (ts[n].movement) clearTimeout(ts[n].movement);//为了兼容变化中的点击
		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(){
		y2=getway(ts[N]);
		if (ts[N].movement) clearTimeout(ts[N].movement);
		if (y2 == -H) return true;
		y2+=Math.floor((-H - y2) / 5);
		setway(ts[N],y2);
		if(y2>-H) ts[N].movement = setTimeout(down, 1);
	}
	for(var i=0;i<ts.length;i++){
		if (!ts[i].style.bottom) ts[i].style.bottom = -H+'px';
		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';
	down();
	up();
}
function opa(n){//图片淡入淡出函数
	var pics = $$('img',pic);
	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);
		pics[n].move=setTimeout(show,1);
	};
	var hide=function(){
		if(pics[N].move) clearTimeout(pics[N].move);
		if (o2 <= 0) {pics[N].style.display='none';return true;}
		o2-=5;
		setfade(pics[N],o2);
		pics[N].move=setTimeout(hide,1);
	};
	for(var i=0;i<pics.length;i++){
		if(!getfade(pics[i])) {setfade(pics[i],0);pics[i].style.display='none';}
		if(pics[i].name=='out') var N=i;
	}
	if(!N&&n==0) {//开始载入...
		pics[n].name='out';
		pics[n].style.display='';
		var o1=getfade(pics[n]);
		show();
		return true;
	}
	if(N==n) return true;
	pics[N].name=''
	pics[n].name='out';
	pics[n].style.display='';
	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(currentNum+1);
		opa(currentNum+1);
       	classNormal();
       	focusBtnList[currentNum+1].className = 'current';
	}else if(currentNum==focusBtnList.length-1){
		poptit(0);
		opa(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(this.I);
			opa(this.I);
        	classNormal();
        	focusBtnList[this.I].className = 'current';
		}
		focusBtnList[i].onmouseover = function(){
			if(!this.className) this.className = 'hover'
		}
		focusBtnList[i].onmouseout = function(){
			if(this.className=='hover') this.className ='';
		}
	}
}
function init(){//初始化
	$(ID).removeChild($$('div',ID)[2]);
	opa(0);
	poptit(0);
    classNormal();
    $$('li',$$('div',ID)[4])[0].className = 'current';
	$(ID).onmouseover = function() {
        atuokey = true;
		clearInterval(auto);
    }
    $(ID).onmouseout = function() {
        atuokey = false;
		auto=setInterval(autoFocusChange, T);
    }
}
var ul=$$('ul',ID)[0];
var li=$$('li',ul);
var NUM=li.length;
var s1='<div class="tsBg"></div><div class="btnBg"><ul>';for(var i=0;i<NUM;i++){s1+='<li></li>'};s1+='</ul></div>';
var s2='<div class="ts"><ul>';
for(var i=0;i<NUM;i++){var a=$$('a',li[i])[0];var img=$$('img',li[i])[0];s2+='<li><a href="'+a.href+'">'+img.alt+'</a></li>'};s2+='</ul></div>';
var s3='<div class="btn"><ul>';
for(var i=0;i<NUM;i++){s3+='<li>'+(i+1)+'</li>'};s3+='</ul></div>';
$(ID).innerHTML=s1+$(ID).innerHTML+s2+s3;
//生成HTML结束
var pic=$$('div',ID)[3];
var tit=$$('div',ID)[4];
var btn=$$('div',ID)[5];
var atuokey = '';
var auto='';
var T=t*1000;//每帧图片停留的时间，1000=1秒
	init();
	focusChange();
	auto=setInterval(autoFocusChange, T);
}
window.onload=function(){
	setMyFocus('myFocus',3)
}
</script>
</head>
<body>
<div id="myFocus">
<div class="loading">请稍候...</div>
<div class="pics">
	<ul>
    	<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="图片1来源于网络，版权属于作者" /></a></li>
        <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="图片2来源于网络，版权属于作者" /></a></li>
        <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="图片3来源于网络，版权属于作者" /></a></li>
        <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="图片4，更多精彩请点击进入我的空间^^" /></a></li>
    </ul>
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

因为本人JS水平有限，制作过程遇到很多问题都是通过搜索或在这里提问，后来发现原来论坛早已有人做过类似的：http://bbs.blueidea.com/thread-2911266-1-3.html，但幸好，还不是完全相同的^_^。例如：朋友那个是一帧跟着一帧运动，而我这个是2帧甚至多帧的同时运动(如果你点击的足够快)，所要处理/考虑的情况比朋友那个要复杂的多，这也是代码有点多的最大原因。当然，这个开始的loading切入我是模仿这位朋友的，希望不要介意^_^。

使用说明(5.12更新)：直接复制套用或调用setMyFocus(ID,t);即可（ID为焦点容器id，t为每帧停留时间单位秒）；其余的包括更改焦点图大小、添加更多的帧或自定义样式等等只需修改HTML/CSS，无需修改参数/JS代码，如添加一帧/图片只需在HTML中增加一行“<li>(你的图片)</li>”即可。HTML结构如下：

复制内容到剪贴板

代码:

<div id="myFocus"><!--焦点图容器ID-->
  <div class="loading">请稍候...</div><!--载入画面-->
  <div class="pics"><!--焦点图内容-->
    <ul>
      <li><a href="#"><img src="#" alt="图片1来源于网络，版权属于作者" /></a></li><!--alt的内容为标题-->
      <li><a href="#"><img src="#" alt="图片2来源于网络，版权属于作者" /></a></li>
      <li><a href="#"><img src="#" alt="图片3来源于网络，版权属于作者" /></a></li>
      <li><a href="#"><img src="#" alt="图片4来源于网络，版权属于作者" /></a></li>
    </ul>
  </div>
</div>

例如作一些简单的修改，就成为了模仿搜狐体育频道的样式（下面代码没有更新）：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://hi.baidu.com/koen_li">
<title>JS仿2010世博会主页焦点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;}/*整个框架大小，可随意更改，可按需要是否加边框*/
#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;}/*图片大小与框架保持一致*/
#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;}/*标题链接样式*/
#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){//文字上下运动函数
	var ts = $$('li',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);//为了兼容变化中的点击
		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">请稍候...</div>
<div id="ts_bg">文字标题的背景</div>
<div id="btn_bg">数字标签的背景</div>
<div id="pics">
	<ul>
    	<li><a href="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15253-1.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li>
        <li><a href="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15254-2.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li>
        <li><a href="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15255-3.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li>
        <li><a href="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15256-4.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li>
        <li><a href="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15252-5.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li>
        <li><a href="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15255-3.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li>
    </ul>
</div>
<div id="ts">
	<ul>
    	<li><a href="#">使用简单，只需修改html内容和样式</a></li>
        <li><a href="#">自定义框架(图片)大小，标题当然也可调</a></li>
        <li><a href="#">也可以添加更多的帧/图片，无需修改JS代码</a></li>
        <li><a href="#">怎样，使用是不是太简单了？</a></li>
        <li><a href="#">欢迎提出批评、建议、改进</a></li>
        <li><a href="#">欢迎围观、学习、模仿</a></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>

提示：您可以先修改部分代码再运行

以上代码皆兼容包括IE系列、火狐系列、谷歌系列等现代浏览器，细心的网友可能会发现其在各个浏览器中运行速度不同，其中谷歌、某些版本的火狐运行比较快、而IE8、某些版本的火狐运行慢一些，而我这个是在IE6中测试和作标准的，这个问题已经开帖请教经典论坛里的达人：http://bbs.blueidea.com/thread-2983483-1-2.html，但目前似乎没有解决的办法，如果朋友们有什么好的解决方案或程序发现什么bug、or进一步的优化代码，欢迎提出^_^

[ 本帖最后由 KOEN301 于 2010-5-13 13:16 编辑 ]

引用报告回复 TOP

西部数码分布式集群主机傲视群雄 | visual studio 2010专区

KOEN301 [楼主]

中级会员

认证
帖子: 95
体力: 202
威望: 0
当前: 广东广州

2^# 大中小发表于 2010-5-9 00:27 只看该作者

这是一款黑色的风格，一起贴到这里好了，方便找，原帖:http://bbs.blueidea.com/thread-2983873-1-1.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://hi.baidu.com/koen_li">
<title>黑色风格的JS焦点图</title>
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{padding:20px;background:#eee;}
#myfocus{width:450px;height:296px;overflow:hidden;padding:6px 6px 24px;background:#333 url(http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg) no-repeat;position:relative;}
#myfocus #myloading{position:absolute;top:0;left:0;z-index:9999;width:462px;height:326px;background:#333;color:#f60;font-size:12px;text-align:center;padding-top:90px;}
#myfocus #myloading .bg{position:absolute;top:0;left:0;z-index:-1;}/*载入画面*/
#myfocus .pics{width:450px;height:296px;overflow:hidden;position:relative;}
#myfocus .pics ul{height:296px;position:absolute;}
#myfocus .pics ul li{width:450px;height:296px;float:left;position:relative;}/*图片大小450px*296px*/
#myfocus .pics ul li div,#myfocus .pics ul li div span,#myfocus .pics ul li div a{display:block;position:absolute;bottom:0;left:0;width:100%;height:34px;}
#myfocus .pics ul li div span{filter:alpha(opacity=50);opacity: 0.5;background:#000;}/*文字标题的背景样式*/
#myfocus .pics ul li div a{line-height:34px;overflow:hidden;padding-left:16px;text-decoration:none;font-size:14px;color:#fff;font-weight:bold;}/*文字标题样式*/
#myfocus .mybtn{position:absolute;bottom:8px;right:8px;}
#myfocus .mybtn ul li{float:left;width:16px;height:6px;margin-left:4px;overflow:hidden;border:1px solid #000;background:#ccc;cursor:pointer;}
#myfocus .mybtn ul li.current{background:#f60;}
</style>
<script type="text/javascript">
/*design by koen @ 10nian5yue11ri*/
/*http://hi.baidu.com/koen_li*/
function setFocus(ID,t){//主函数...
function $(id) {return document.getElementById(id);}
function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);}
var n='';//标记
function showPics(num){
	if(n===num) return true;
	if(n==='') n=0;
	else n=num;
	var pics=$$('ul',ID)[0];
	var tit=$$('div',pics)[num];
	if (!pics.style.left){pics.style.left = 0+'px';}
    if (!tit.style.bottom||parseInt(tit.style.bottom)>-34){tit.style.bottom = -34+'px';}
	var endX=-num*$$('div',ID)[0].clientWidth;
	var goimg=function(){
		X=parseInt(pics.style.left);
		if (pics.movement){clearTimeout(pics.movement);}
		if(parseInt(pics.style.left)==endX) return true;
		if((endX-X)>0) X+=Math.ceil((endX-X) / 10);
		else X+=Math.floor((endX-X) / 10);
		pics.style.left=X+'px';
		pics.movement = setTimeout(goimg, 5);
	}
	var gotit=function(){
		var y=parseInt(tit.style.bottom);
		if (tit.movement){clearTimeout(tit.movement);}
		if(y==0) return true;
		y+=Math.ceil((0-y) / 10);
		if(parseInt(pics.style.left)==endX) tit.style.bottom=y+'px';
		if(y<0) tit.movement = setTimeout(gotit, 16);
	}
	goimg();
	gotit();
}
function classNormal() {//数字标签样式清除
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
        focusBtnList[i].className = '';
    }
}
function focusChange() {//交互切换
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
		focusBtnList[i].I=i;
		focusBtnList[i].onmouseover = function(){
        	showPics(this.I);
        	classNormal();
        	focusBtnList[this.I].className = 'current';
		}
	}
}
var autoFocusChange=function() {//自动运行
    if (atuokey) return;
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
        if (focusBtnList[i].className == 'current') {
            var currentNum = i;
        }
    }
	if(currentNum<focusBtnList.length-1){
		showPics(currentNum+1);
       	classNormal();
       	focusBtnList[currentNum+1].className = 'current';
	}else if(currentNum==focusBtnList.length-1){
		showPics(0);
       	classNormal();
       	focusBtnList[0].className = 'current';
	}
}
var atuokey = '';
function init(){//初始化<div><span></span><a href="#">文字说明</a></div>
	var ul=$$('ul',ID)[0];
	var li=$$('li',ul);
	var NUM=li.length;
	var wid=$('myloading')?$$('div',ID)[1].clientWidth:$$('div',ID)[0].clientWidth;ul.style.width=wid*NUM+'px';
	for(var i=0;i<NUM;i++){
		var a=li[i].getElementsByTagName('a')[0];
		var img=li[i].getElementsByTagName('img')[0];
		li[i].innerHTML=li[i].innerHTML+'<div><span></span><a href="'+a+'">'+img.alt+'</a></div>';
	}
	var s='<div class="mybtn"><ul>';
	for(var i=0;i<NUM;i++){s+='<li></li>'}
	s+='</ul></div>';
	$(ID).innerHTML+=s;
	$(ID).removeChild($('myloading'));
	showPics(0);
    classNormal();
    $$('li',$$('ul',ID)[1])[0].className = 'current';
	$(ID).onmouseover = function() {
        atuokey = true;
		clearInterval(auto);
    }
    $(ID).onmouseout = function() {
        atuokey = false;
		auto=setInterval(autoFocusChange, T);
    }
}
var T=t*1000;//每帧图片停留的时间，1000=1秒
var auto='';
init();
focusChange();
auto=setInterval(autoFocusChange, T);
};
window.onload=function(){
	setFocus('myfocus',4);
}
</script>
</head>
<body>
<div id="myfocus">
	<div id="myloading">请稍候...<br /><br /><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051020541820883.gif" /><img class="bg" src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg" /></div>
	<div class="pics">
    	<ul>
        	<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="图片1来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="图片2来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="图片3来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018052886494.jpg" alt="图片4来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="图片5来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018061333534.jpg" alt="图片6来源于网络，版权属于作者" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

前端开发者 2025-08-10 14:30

React 18的并发渲染确实是个重大改进，我们在项目中已经升级使用，性能提升明显！

漂亮的JS仿2010世博会主页焦点flash（5.13更新）

代码:

评论

热门文章

文章分类