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

2009-07-13 0 条评论 4,292 次阅读 被赞了 0 次
本文发布于：2009-07-13，最后更新于：2016-09-07，如果内容失效请留言告知。

运行即见效果：

效果一：
运行即见效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!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>

效果二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!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 Thumbnailcss的滤镜应用 Default Thumbnaildiv+css三栏自适应宽度简单布局学习实例 Default ThumbnailCSS代码在线压缩优化工具示例 Default Thumbnailjavascript实现动态添加表格数据行 ASP后台数据库保存例子参考 Default ThumbnailCSS Sprite含义、相关技术、示例、优化技巧介绍及优化工具下载 Default Thumbnail静态HTML页利用JavaScript处理当前网址URL及参数变量方式 Default ThumbnailCSS学习进阶：文字属性与表格中的一些标记 Default ThumbnailCSS学习进阶：一些CSS设计的实用小技巧参考 Default Thumbnailcss3的​​​​​transition特性：增强网站的体验的CSS3 Transition使用详解 Default Thumbnailoschina 的愚人节小创意：CSS3 的 transform 特性
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表回复

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

Captcha Code