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

<！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 = ""+imgs[0].title+""; // 标题 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 = ""+this.imgs[this.cur_i].title+""; 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></body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]