Question

JS实现循环图片的问题

var imgs =
[
{max: '000', 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_5.jpg', min: 'http://www.kuanghong.com/han/images/img_5s.jpg', url: '', title: '', con: '' }
];

我想动态添加图片，标题？
如何实现？

Answer 1

<script type="text/javascript" language="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 max1 = document.getElementById("max1").value;
var max2 = document.getElementById("max2").value;
var max3 = document.getElementById("max3").value;
var max4 = document.getElementById("max4").value;
var max5 = document.getElementById("max5").value;
var max6 = document.getElementById("max6").value;

var min1 = document.getElementById("min1").value;
var min2 = document.getElementById("min2").value;
var min3 = document.getElementById("min3").value;
var min4 = document.getElementById("min4").value;
var min5 = document.getElementById("min5").value;
var min6 = document.getElementById("min6").value;

var con1 = document.getElementById("con1").value;
var con2 = document.getElementById("con2").value;
var con3 = document.getElementById("con3").value;
var con4 = document.getElementById("con4").value;
var con5 = document.getElementById("con5").value;
var con6 = document.getElementById("con6").value;

var imgs =
[
{ max: max1, min: min1, url: '#', con: con1 },
{ max: max2, min: min2, url: '#', con: con2 },
{ max: max3, min: min3, url: '#', con: con3 },
{ max: max4, min: min4, url: '#', con: con4 },
{ max: max5, min: min5, url: '#', con: con5 },
{ max: max6, min: min6, url: '#', con: con6 }
];

function Focus(){ this.initialize.apply(this, arguments) };
Focus.prototype = {
initialize: function(imgObj, focus, tim, speed){
this.imgs= imgObj;
this.tim= tim*1000||2000;
this.speed= speed||0.3;
this.img_m= null;// 大图
this.img_m2= null;// 大图2
this.lis= [];// 小图列表
this.mask= null;// 蒙板

this.con= null;// 内容
this.cur= 0;// 当前位置
this.t= null; // 整体计时
this.tm= null;// mask位置
this.ti= null;// img 切换
this.stoped= true;// 停止状态
this.tem= 0;// 临时数据
this.loaded= {imgs:[], num:0};// 加载进度
this.getElement(document.getElementById(focus));
this.preload();
},
preload: function(){
for(var i=0; i<this.imgs.length; i++){
this.loaded.imgs[i]= new Image();
this.loaded.imgs[i].onload= this.load_num.bind(this);
this.loaded.imgs[i].src= this.imgs[i].max;
}
},
load_num: function(){
this.loaded.num++;
if(this.loaded.num == this.imgs.length)
this.start();
},
getElement: function(focus){ // 获得蒙板，小图列表，标题/内容容器等。。。
var ds = focus.getElementsByTagName('div');
for(var i=0; i<ds.length; i++)
switch(ds[i].className){
case 'f_img_roll':
this.img_m = document.createElement('img');
this.img_m2 = document.createElement('img');
this.img_m.src = this.imgs[0].max;
this.img_m.style.zIndex = 101;
this.img_m2.style.zIndex= 100;
ds[i].onmouseover = this.stop.bind(this);
ds[i].onmouseout = this.start.bind(this);
ds[i].appendChild(this.img_m);
ds[i].appendChild(this.img_m2);

case 'f_img_tree':
this.mask = document.createElement('div');
this.mask.onmouseover = this.stop.bind(this);
this.mask.onmouseout = this.start.bind(this);
var ul = document.createElement('ul');
var oThis = this;
for(var n=0; n<this.imgs.length; n++){
this.lis[n] = document.createElement('li');
this.lis[n].n = n;
this.lis[n].innerHTML= '<img src="'+this.imgs[n].min+'" />';
this.lis[n].onmouseover= function(){ this.style.border = "1px solid #cc0000"; }
this.lis[n].onmouseout= function(){ this.style.border = "1px solid #0066cc"; }
this.lis[n].onclick = function(){ if(oThis.lis[oThis.cur]!= this) oThis.nextFrame.call(oThis, this.n); }
ul.appendChild(this.lis[n]);
};
ds[i].appendChild (this.mask);
ds[i].appendChild (ul);
break;
case 'con':
this.con = ds[i];
this.con.innerHTML = this.imgs[0].con;
break;
}
},

nextFrame: function(n){
if(this.t)clearTimeout(this.t);
if(this.tm)clearInterval(this.tm);
if(this.ti)clearInterval(this.ti);
if(n)this.cur = n-1;
var top = 0, posTo = 0;
if(n!=0 && this.imgs[this.cur+1]){
posTo = this.lis[this.cur+1].offsetTop;
this.cur = this.cur+1;
}else{
posTo = this.lis[0].offsetTop;
this.cur = 0;
}
this.tem = this.mask.offsetTop;
this.tem > posTo? top = 1 : top = 0;
this.tm = setInterval(this.moveTo.bind(this, top, posTo), 25);
},

moveTo: function(top, posTo){
if(!top){
if((this.tem+2) >= posTo+1){
clearInterval(this.tm);
this.mask.style.top = posTo+'px';
this.img_swap();
return;
}
this.tem += (posTo - this.tem) * this.speed
}else{
if((this.tem-2) <= posTo-1){
clearInterval(this.tm);
this.mask.style.top = posTo+'px';
this.img_swap();
return;
}
this.tem -= (this.tem-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.con.innerHTML= this.imgs[this.cur].con;
b.src = this.imgs[this.cur].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;
if(this.ti)clearInterval(this.ti);
this.ti= setInterval(this.img_hid.bind(this, t, b), 25);
},
img_hid: function(t,b){
this.tem -= 7;
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.ti);
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.stoped) return;
this.start(); // 继续循环
}
},
start: function(){
if(this.t) clearTimeout(this.t);
this.t= setTimeout(this.nextFrame.bind(this, null), this.tim);
this.stoped = false;
},
stop: function(){
clearTimeout(this.t);
this.stoped = true;
}
}
window.onload = function()
{
// var max_src1 = document.getElementById("HiddenField1").value;
// alert(max_src1);
var focus = new Focus(imgs, 'focus_m');
//focus.start();
}
</script>

Answer 2

用后台程序写好,或者是用ajax 方法异步调用