比较炫的图片播放器 js 焦点效果代码

更新时间：2008年07月18日 13:13:04 作者：

之前做过一个,有点不理想, 改进下儿,测试一下，果然厉害

<!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=gb2312" /> <title>图片播放器_图片轮换_焦点效果</title> <style type="text/css">     #focus_m{position:relative; width:420px; height:384px; background:#133775}     .f_img_roll{width:350px; height:300px; position:relative;}     .f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;}     .f_img_tree{position:absolute; width:75px; height:300px; right:3px; top:0;}     .f_img_tree div{position:absolute; z-index:201; top:3px; right:0; width:75px; height:47px; background:url(http://www.kuanghong.com/han/images/mask.gif) no-repeat;}     .f_img_tree ul{margin:0; padding:0; list-style:none; position:absolute; right:0;}     .f_img_tree li{width:60px; height:45px; border:1px solid #0066cc; margin-top:3px;}     .f_img_tree img{width:54px; height:39px; border:3px solid #000066; vertical-align:top;}     .f_con{color:#fff; height:70px;}     .f_con .f_title{font-size:14px; height:30px; line-height:30px; margin-top:5px; font-weight:bold; text-align:center;}     .f_con .f_title a:link, .f_con .f_title a:visited{color:#fff; text-decoration:none}     .f_con .f_title a:hover{text-decoration:underline}     .f_con .f_con{font-size:12px; padding:0 10px; height:40px; line-height:150%;}   </style>   <script type="text/javascript">   function $A(iterable) {         var results = [];         for (var i = 0; i < iterable.length; i++)results.push(iterable[i]);         return results;     }     Function.prototype.bind = function() {         var __method = this, args = $A(arguments), object = args.shift();         return function() {             return __method.apply(object, args.concat($A(arguments)));         }     }         var imgs = [             {max:'http://www.kuanghong.com/han/images/img_1.jpg', min:'http://www.kuanghong.com/han/images/img_1s.jpg', url:'#', title:'标题01标题01标题01标题01标题01', con:'内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01'},             {max:'http://www.kuanghong.com/han/images/img_2.jpg', min:'http://www.kuanghong.com/han/images/img_2s.jpg', url:'#', title:'标题02标题02标题02标题02标题02', con:'内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02'},             {max:'http://www.kuanghong.com/han/images/img_3.jpg', min:'http://www.kuanghong.com/han/images/img_3s.jpg', url:'#', title:'标题03标题03标题03标题03标题03', con:'内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03'},             {max:'http://www.kuanghong.com/han/images/img_4.jpg', min:'http://www.kuanghong.com/han/images/img_4s.jpg', url:'#', title:'标题04标题04标题04标题04标题04', con:'内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04'},             {max:'http://www.kuanghong.com/han/images/img_5.jpg', min:'http://www.kuanghong.com/han/images/img_5s.jpg', url:'#', title:'标题05标题05标题05标题05标题05', con:'内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05'},             {max:'http://www.kuanghong.com/han/images/img_6.jpg', min:'http://www.kuanghong.com/han/images/img_6s.jpg', url:'#', title:'标题06标题06标题06标题06标题06', con:'内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06'}         ];         function focus(){this.initialize.apply(this,arguments)}         focus.prototype = {             initialize: function(imgs, fc, tim, speed){                 this.imgs    = imgs;                 this.tim    = tim*1000 || 2000;                 this.speed    = speed || 0.3;                 this.t        = null;        // 动作计时                 this.tm        = null;        // 图片计时                 this.tb        = null;        // 滑块儿计时                 this.cur_i    = 0;        // 当前图片位置                 this.move    = false;    // 是否在运动                 this.tem    = 0;        // 临时数据                 this.posTo    = 0;        // 滑块儿目的地                 this.over    = 0;                 var ds        = document.getElementById(fc).getElementsByTagName('div');                 var di        = ds[0];                 this.img_m    = document.createElement('img');                 this.img_m2 = this.img_m.cloneNode(true);                 var dm        = ds[1];                 this.title    = ds[3];                 this.con    = ds[4];                 this.mask    = document.createElement('div');                 this.ul        = document.createElement('ul');                 this.lis    = [];                 this.img_m.style.zIndex = 101;                 this.img_m2.style.zIndex = 100;                 di.appendChild(this.img_m);                 di.appendChild(this.img_m2);                 di = null;                 dm.appendChild(this.mask);                 dm.appendChild(this.ul);                 dm = null;                 this.img_cache();                 this.load();             },             img_cache: function(){                 var img = new Image();                 for(var i=0; i<this.imgs.length; i++)img.src = this.imgs[i].max;             },             stop: function(){                 clearTimeout(this.t);                 this.over = 1;             },             start: function(){                 this.over = 0;                 this.t = setTimeout(this.f_next.bind(this,null), this.tim);             },             load: function(){                 var imgs             = this.imgs;                 this.img_m.src         = imgs[0].max;   // 加载默认大图                 this.title.innerHTML = '<a href="'+imgs[0].url+'">'+imgs[0].title+'</a>'; // 标题                 this.con.innerHTML     = imgs[0].con;      //内容                 var oThis          = this;                 for(var i=0; i<imgs.length; i++){     //加载小图                     var li              = document.createElement('li');                         li.onclick      = function(){ oThis.f_next.call(oThis,this.i); }                         li.innerHTML  = '<img src="'+imgs[i].min+'" alt="" />';                         li.i          = i;                         this.lis.push(li);                         this.ul.appendChild(li);                 }                 var lis = this.ul.childNodes;                 for(var i=0; i<lis.length; i++){                     lis[i].onmouseover = function(){ this.style.border="1px solid #cc0000"; }                     lis[i].onmouseout = function(){ this.style.border="1px solid #0066cc"; }                 }                 this.t = setTimeout(this.f_next.bind(this,null), this.tim);                 this.title.parentNode.onmouseover = this.stop.bind(this);                 this.title.parentNode.onmouseout = this.start.bind(this);             },             f_next: function(n){                 if(this.tb) clearInterval(this.tb);                 if(this.t) clearTimeout(this.t);                 if(this.tm) clearInterval(this.tm);                 if(n)this.cur_i = n-1;                 var top = 0;                 if(n!=0 && this.imgs[this.cur_i+1]){                     this.posTo = this.lis[this.cur_i+1].offsetTop;                     this.cur_i = this.cur_i+1;                 }else{                     this.posTo = this.lis[0].offsetTop;                     this.cur_i = 0;                 }                 this.tem = this.mask.offsetTop;                 this.tem > this.posTo? top = 1 : top = 0;                 this.tb = setInterval(this.moveTo.bind(this, top), 25);             },             moveTo: function(top){                 if(!top){                     if((this.tem+1.8)>=this.posTo+1){                         this.mask.style.top = this.posTo+'px';                         clearInterval(this.tb);                         this.img_swap();                         return;                     }                     this.tem += (this.posTo-this.tem)*this.speed                 }else{                     if((this.tem-1.8)<=this.posTo-1){                         this.mask.style.top = this.posTo+'px';                         clearInterval(this.tb);                         this.img_swap();                         return;                     }                     this.tem -= (this.tem-this.posTo)*this.speed;                 }                 this.mask.style.top = this.tem+'px';             },             img_swap: function(){                 var t, b;                 if(this.img_m.style.zIndex>this.img_m2.style.zIndex){                     t = this.img_m;                     b = this.img_m2;                 }else{                     t = this.img_m2;                     b = this.img_m;                 }                 this.title.innerHTML = '<a href="'+this.imgs[this.cur_i].url+'">'+this.imgs[this.cur_i].title+'</a>';                 this.con.innerHTML     = this.imgs[this.cur_i].con;                 b.src                 = this.imgs[this.cur_i].max;                 /MSIE/.test(navigator.userAgent) ? this.tem = t.style.filter ? t.style.filter.replace(/^.+=(\d+).+$/,'$1') : 100 : this.tem = t.style.opacity ? t.style.opacity*100 : 100;                 this.tm                 = setInterval(this.img_hid.bind(this, t, b), 25);             },             img_hid: function(t,b){                 this.tem -= 5;                 if(/MSIE/.test(navigator.userAgent))                     t.style.filter = 'alpha(opacity='+this.tem+')';                 else                     t.style.opacity = this.tem/100;                 if(this.tem <=0){                     clearInterval(this.tm);                     var tz           = t.style.zIndex;                     var bz           = b.style.zIndex;                     t.style.zIndex = bz                     b.style.zIndex = tz;                     if(/MSIE/.test(navigator.userAgent))                         t.style.filter = 'alpha(opacity=100)';                     else                         t.style.opacity = 1;                     if(this.over) return;                     this.t = setTimeout(this.f_next.bind(this, null), this.tim); // 继续循环                 }             }         }         window.onload = function(){             new focus(imgs,'focus_m');         }   </script> </head> <body> <div id="focus_m">   <div class="f_img_roll"></div><div class="f_img_tree"></div>   <div class="f_con">     <div class="f_title"></div>     <div class="f_con"></div>   </div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript检测(控制 )上传文件大小
用户客户端检测图片的大小，实际应用中，服务器端测试仍必不可少。
2009-12-12
纯CSS实现的漂亮的立体图片边框效果，阴影代码
纯CSS 漂亮的立体图片边框效果，图片阴影代码，个人觉得这个挺实用，CSs实现的，定义成类，可让你整个网页上的图片都是有立体阴影的，不错吧，感谢作者分享。
2010-10-10
js 图片轮播(5张图片)
网上比较常见的用jquery实现的图片轮播效果代码。
2008-12-12
用javascript实现的图片马赛克后显示并切换加文字功能
用javascript实现的图片马赛克后显示并切换加文字功能...
2007-04-04
JavaScript妙味课堂物体平滑移动特效
JavaScript妙味课堂上的一个教学实例，物体平移运动特效，点击按钮后激活函数，控制图片在一定时间内匀速运动，是最简单、最基础的运动方式，其特点是运动的方向和速度都不发生改变。
2010-09-09
在图片上单击获取图片原始大小
在图片上单击鼠标，获取图片的原始尺寸大小，变通一下我们可以实现让图片随网页的大小而自动适应，我们可以判断如果图片超出规定大小，则强制压缩图片，运行一下看效果吧。
2009-10-10
链接图片无缝(无间断)向左平滑滚动Js版代码
图片向左无缝滚动，JavaScript版，速度可自定义，代码简洁易懂，自己修改方便。
2010-09-09
js实现运动logo图片效果及运动元素对象sportBox使用方法
Js实现运动的图片特效，两个网站Logo快速运动类似显示器屏保。借此练习运动元素对象sportBox的使用方法，需要了解的朋友可以参考下
2012-12-12
js实现图片显示局部，鼠标经过显示全部的效果
2008-01-01
javascript dom代码应用简单的相册[firefox only]
最近一直对前端开发很感兴趣，特别是在像jquery这种流行ajax类库的帮助下，即使没有很好的javascript功底也能做出不错的动态效果，确实是方便。
2010-06-06