#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 < 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 = ''; // 标题
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.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');
}
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]