css+javascript仿flash焦点图片幻灯展示效果

2009-07-13 0 条评论 3,876 次阅读 被赞了 0 次

运行即见效果：

效果一：
运行即见效果：

<!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>

相关文章:

Default Thumbnailbootstrap前端开发框架简介 Default ThumbnailJavaScript简单实用技巧之网页表格特效 Default Thumbnail20个功能强大外观漂亮的Ajax+CSS表格特效 Default Thumbnailoverflow:hidden控制div溢出问题 Default Thumbnail双击页面滚动单击页面滚动停止的JAVAscript特效实现代码 Default ThumbnailIE8、IE7、IE6、火狐的一些CSS HACK测试 Default Thumbnaildiv+css三栏自适应宽度简单布局学习实例 Default ThumbnailCSS Sprite含义、相关技术、示例、优化技巧介绍及优化工具下载 Default ThumbnailCSS学习进阶：文字属性与表格中的一些标记 Default Thumbnailjavascript控制html父子框架iframe的值传递及方法引用问题
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code