比较炫的图片播放器 js 焦点效果代码
图片播放器_图片轮换_焦点效果
#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%;}
function $A(iterable) {
var results = [];
for (var i = 0; i '+imgs[0].title+''; // 标题
this.con.innerHTML = imgs[0].con; //内容
var oThis = this;
for(var i=0; i';
li.i = i;
this.lis.push(li);
this.ul.appendChild(li);
}
var lis = this.ul.childNodes;
for(var i=0; i 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.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
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]