共计 10144 个字符,预计需要花费 26 分钟才能阅读完成。
提醒:本文最后更新于2016-09-07 11:00,文中所关联的信息可能已发生改变,请知悉!
运行即见效果:
效果一:
运行即见效果:
<!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://www.wxwdesign.cn/Down/flash/flash_show/" /> | |
<style type="text/css"> | |
.content_banner{ width:541px;margin-right:10px;float:left; height:244px; overflow:hidden; background-color:#000000; position:relative;} | |
.content_banner .small_list{padding:4px; float:left; height:236px; width:82px; overflow:hidden;} | |
.content_banner .small_list a{ display:block; width:82px; height:36px; margin-bottom:4px; cursor:pointer; overflow:hidden;} | |
.content_banner .focus_banner{ width:443px; height:auto; float:right; padding:4px; text-align:center; color:#FFCC00; font-size:12px; line-height:30px; position:relative;} | |
.content_banner .focus_banner .loading{color:#FFCC00; font-weight:bold; font-family:Arial, Helvetica, sans-serif,"宋体"; font-size:13px; width:100%; text-align:center; padding:30px 0px 0px;} | |
.content_banner .focus_banner .top{position:absolute;left:0px; _left:4px; top:4px;} | |
* + html .content_banner .focus_banner .top{left:4px;} | |
.content_banner ul{display:none;} | |
.content_banner .focus_border{ background:url(images/index_focus_arrowborder.gif); width:88px; height:36px; position:absolute; left:4px; top:4px; clear:both;} | |
</style> | |
<script language="javascript" type="text/javascript"> | |
function getid(id){return document.getElementById(id);} | |
function gettag(tag,obj){if(obj){return obj.getElementsByTagName(tag)}else{return document.getElementsByTagName(tag)}} | |
function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!="function"){window.onload=func;}else{window.onload=function(){oldonload();func();}};} | |
function main_focus(){ | |
if(getid("focus_banner")){ | |
var a=gettag("a",getid("focus_banner")); | |
var d=gettag("div",getid("focus_banner")); | |
var li=gettag("li",getid("focus_banner")); | |
var fade_below=document.createElement("div"); | |
var fade_upon=document.createElement("div"); | |
fade_upon.className="top"; | |
d[1].innerHTML=""; | |
d[1].appendChild(fade_below); | |
d[1].appendChild(fade_upon); | |
fade_upon.innerHTML=li[0].innerHTML+gettag("img",li[0])[0].alt; | |
var current=0,s2,len,y=4,dir,timer,timer2,timer3,timer4; | |
var interv=3000; | |
for(var i=0;i<a.length;i++){ | |
a<span style="text-decoration: line-through;">.index=i; | |
a<span style="text-decoration: line-through;">.onclick=function(){if(this.index<current){dir=-1;}else{dir=1};len=this.index*40+4;s2=current;current=this.index;clearTimeout(timer2);clearTimeout(timer);clearTimeout(timer3);clearTimeout(timer4);slide();timer2=setTimeout(start_auto,interv);}} | |
function slide(){ | |
if((y<len&&dir>0)||(y>len&&dir<0)){ | |
if(dir>0){y+=Math.ceil((len-y)/6);}else{y+=dir*Math.ceil((y-len)/6);}; | |
timer=setTimeout(slide,10); | |
}else{ | |
clearTimeout(timer); | |
fade_below.innerHTML=li[current].innerHTML+gettag("img",li[current])[0].alt; | |
fade_upon.innerHTML=li[s2].innerHTML+gettag("img",li[s2])[0].alt; | |
fadeout(fade_upon); | |
fadeon(fade_below); | |
} | |
d[4].style.top=String(y)+"px"; | |
} | |
function fadeon(obj){var n=0;(function run(){if(n<100){n+=5;opacity(obj,n);timer3=setTimeout(run,30);}})();} | |
function fadeout(obj){var n=100;obj.style.display="block";(function run(){if(n>0){n-=5;opacity(obj,n);timer4=setTimeout(run,30);}else{obj.style.display="none";}})();} | |
function opacity(obj,n){obj.style.opacity=String(n/100);obj.style.filter="alpha(opacity="+n+")";} | |
function start_auto(){ | |
if(current<li.length-1){current++;dir=1;s2=current-1;}else{current=0;dir=-1;s2=li.length-1} | |
timer2=setTimeout(start_auto,interv); | |
len=current*40+4; | |
clearTimeout(timer); | |
slide(); | |
} | |
timer2=setTimeout(start_auto,interv); | |
} | |
} | |
addLoadEvent(main_focus); | |
</script> | |
<title>javascript仿flash焦点图片效果</title> | |
</head> | |
<body> | |
<div class="content_banner" id="focus_banner"> | |
<div class="small_list"><a title="banner1"><img src="http://www.wxwdesign.cn/Down/flash/flash_show/images/small1.jpg" /></a><a title="banner2"><img src="http://www.wxwdesign.cn/Down/flash/flash_show/images/small2.jpg" /></a><a title="banner3"><img src="http://www.wxwdesign.cn/Down/flash/flash_show/images/small3.jpg" /></a><a title="banner4"><img src="http://www.wxwdesign.cn/Down/flash/flash_show/images/small4.jpg" /></a><a title="banner5"><img src="http://www.wxwdesign.cn/Down/flash/flash_show/images/small5.jpg" /></a><a title="banner6"><img src="http://www.wxwdesign.cn/Down/flash/flash_show/images/small6.jpg" /></a></div> | |
<div class="focus_banner"><div class="loading">Loading...<br /><img src="http://www.wxwdesign.cn/wp-content/uploads/month_0809/v2008925193118.gif" width="100" height="100" /></div></div> | |
<ul> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/e2009712235827.jpg" width="443" height="209" alt="展示图片1" /></li> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/a2009712235840.jpg" width="443" height="209" alt="展示图片2" /></li> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/72009712235851.jpg" width="443" height="209" alt="展示图片3" /></li> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/22009712235857.jpg" width="443" height="209" alt="展示图片4" /></li> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/j200971223595.jpg" width="443" height="209" alt="展示图片5" /></li> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/42009712235911.jpg" width="443" height="209" alt="展示图片6" /></li> | |
</ul> | |
<div class="focus_border"></div> | |
</div> | |
</body> | |
</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://www.wxwdesign.cn/Down/flash/flash_show/" /> | |
<style type="text/css"> | |
.content_banner{ width:541px;margin-right:10px;float:left; height:244px; overflow:hidden; background-color:#000000; position:relative;} | |
.content_banner .small_list{padding:4px; float:left; height:236px; width:82px; overflow:hidden;} | |
.content_banner .small_list a{ display:block; width:82px; height:36px; margin-bottom:4px; cursor:pointer; overflow:hidden;} | |
.content_banner .focus_banner{ width:443px; height:auto; float:right; padding:4px; text-align:center; color:#FFCC00; font-size:12px; line-height:30px; position:relative;} | |
.content_banner .focus_banner .loading{color:#FFCC00; font-weight:bold; font-family:Arial, Helvetica, sans-serif,"宋体"; font-size:13px; width:100%; text-align:center; padding:30px 0px 0px;} | |
.content_banner .focus_banner .top{position:absolute;left:0px; _left:4px; top:4px;} | |
* + html .content_banner .focus_banner .top{left:4px;} | |
.content_banner ul{display:none;} | |
.content_banner .focus_border{ background:url(images/index_focus_arrowborder.gif); width:88px; height:36px; position:absolute; left:4px; top:4px; clear:both;} | |
</style> | |
<script language="javascript" type="text/javascript"> | |
function getid(id){return document.getElementById(id);} | |
function gettag(tag,obj){if(obj){return obj.getElementsByTagName(tag)}else{return document.getElementsByTagName(tag)}} | |
function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!="function"){window.onload=func;}else{window.onload=function(){oldonload();func();}};} | |
function main_focus(){ | |
if(getid("focus_banner")){ | |
var a=gettag("a",getid("focus_banner")); | |
var d=gettag("div",getid("focus_banner")); | |
var li=gettag("li",getid("focus_banner")); | |
var fade_below=document.createElement("div"); | |
var fade_upon=document.createElement("div"); | |
fade_upon.className="top"; | |
d[1].innerHTML=""; | |
d[1].appendChild(fade_below); | |
d[1].appendChild(fade_upon); | |
fade_upon.innerHTML=li[0].innerHTML+gettag("img",li[0])[0].alt; | |
var current=0,s2,len,y=4,dir,timer,timer2,timer3,timer4; | |
var interv=3000; | |
for(var i=0;i<a.length;i++){ | |
a<span style="text-decoration: line-through;">.index=i; | |
a<span style="text-decoration: line-through;">.onclick=function(){if(this.index<current){dir=-1;}else{dir=1};len=this.index*40+4;s2=current;current=this.index;clearTimeout(timer2);clearTimeout(timer);clearTimeout(timer3);clearTimeout(timer4);slide();timer2=setTimeout(start_auto,interv);}} | |
function slide(){ | |
if((y<len&&dir>0)||(y>len&&dir<0)){ | |
if(dir>0){y+=Math.ceil((len-y)/6);}else{y+=dir*Math.ceil((y-len)/6);}; | |
timer=setTimeout(slide,10); | |
}else{ | |
clearTimeout(timer); | |
fade_below.innerHTML=li[current].innerHTML+gettag("img",li[current])[0].alt; | |
fade_upon.innerHTML=li[s2].innerHTML+gettag("img",li[s2])[0].alt; | |
fadeout(fade_upon); | |
fadeon(fade_below); | |
} | |
d[4].style.top=String(y)+"px"; | |
} | |
function fadeon(obj){var n=0;(function run(){if(n<100){n+=5;opacity(obj,n);timer3=setTimeout(run,30);}})();} | |
function fadeout(obj){var n=100;obj.style.display="block";(function run(){if(n>0){n-=5;opacity(obj,n);timer4=setTimeout(run,30);}else{obj.style.display="none";}})();} | |
function opacity(obj,n){obj.style.opacity=String(n/100);obj.style.filter="alpha(opacity="+n+")";} | |
function start_auto(){ | |
if(current<li.length-1){current++;dir=1;s2=current-1;}else{current=0;dir=-1;s2=li.length-1} | |
timer2=setTimeout(start_auto,interv); | |
len=current*40+4; | |
clearTimeout(timer); | |
slide(); | |
} | |
timer2=setTimeout(start_auto,interv); | |
} | |
} | |
addLoadEvent(main_focus); | |
</script> | |
<title>javascript仿flash焦点图片效果</title> | |
</head> | |
<body> | |
<div class="content_banner" id="focus_banner"> | |
<div class="small_list"><a title="banner1"><img src="images/small1.jpg" /></a><a title="banner2"><img src="images/small2.jpg" /></a><a title="banner3"><img src="images/small3.jpg" /></a><a title="banner4"><img src="images/small4.jpg" /></a><a title="banner5"><img src="images/small5.jpg" /></a><a title="banner6"><img src="images/small6.jpg" /></a></div> | |
<div class="focus_banner"><div class="loading">Loading...<br /><img src="http://www.wxwdesign.cn/wp-content/uploads/month_0809/v2008925193118.gif" width="100" height="100" /></div></div> | |
<ul> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/e2009712235827.jpg" width="443" height="209" alt="展示图片1" /></li> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/a2009712235840.jpg" width="443" height="209" alt="展示图片2" /></li> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/72009712235851.jpg" width="443" height="209" alt="展示图片3" /></li> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/22009712235857.jpg" width="443" height="209" alt="展示图片4" /></li> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/j200971223595.jpg" width="443" height="209" alt="展示图片5" /></li> | |
<li><img src="http://lzw.me/wp-content/uploads/month_0907/42009712235911.jpg" width="443" height="209" alt="展示图片6" /></li> | |
</ul> | |
<div class="focus_border"></div> | |
</div> | |
</body> | |
</html> |
正文完