最近在研究javascript,闲来无事,弄了个js的图片幻灯片,这里高人多多,在下就自讨没趣,献丑了
//定义结构 //url:图片地址,link:链接地址,time:间隔时间,target:链接方式 var picss=[ {url:'http://img08.taobaocdn.com/bao/uploaded/i8/T132JHXoNGXXb8_w73_050214.jpg', link:'http://s.click.taobao.com/t_8?e=7HZ6jHSTb0FvNGBTwZ3oxzBmdv8h%2B%2FprH6BJMj8qtqGgbLzAVvw28JzlzH3NjXPbRQcI2oLyrlk2c6j5gA%3D%3D&c=dcb7de581b878042fe64d499e3aa159a&p=mm_14565610_0_0&n=19&u=12032832', time:3000, title:'特价M157 换季清仓夏装女装淑女高腰碎花朵波西米亚雪纺连衣裙子', target:'_blank'}, {url:'http://img07.taobaocdn.com/bao/uploaded/i7/T13JRGXflkXXaK0tLa_090547.jpg', link:'http://s.click.taobao.com/t_8?e=7HZ6jHSTaEmStlBP7HKjlN1GMl0awBs4Cf6smIhVyQzKnhjbW5xAzhxHRqZPmkho4Jg%2BkzwV5dY8V%2FHJdvM%3D&c=f4d6b28b84cc994ccf0c16fd0602cf7f&p=mm_14565610_0_0&n=19&u=12032832', time:3000, title:'冲皇冠~韩版日式米娜夏装新款淑女气质百搭雪纺中袖连衣裙子640', target:'_blank'}, {url:'http://img02.taobaocdn.com/bao/uploaded/i2/T1T1xIXlXEXXXvHEs__111009.jpg', link:'http://s.click.taobao.com/t_8?e=7HZ6jHSTaEEbaPpRyPwAW8sFDS%2Bw0xsvs7AM0BsDmAi7XD9yWleguM7b3%2FLHnOorrY1%2BLl2OIedeOS8gTQ%3D%3D&c=5be3107fc12694693615ec2d3e861201&p=mm_14565610_0_0&n=19&u=12032832', time:3000, title:'赔本赚吆喝!雪纺连衣裙舒服的日本天丝面料带腰带有大码附实物图', target:'_blank'}, {url:'http://img01.taobaocdn.com/bao/uploaded/i1/T1W9BHXk4SXXba1Mg4_052736.jpg', link:'http://s.click.taobao.com/t_8?e=7HZ6jHSTbIKkXSg%2BywUJqXdrDFL%2FB74NdN%2B7H6IDG9SjiI%2FLfdVkiGMMhhIHLM9g44qaRhUDy9rAGg%3D%3D&c=7e7f82f848fa4dd200b27f60c9988965&p=mm_14565610_0_0&n=19&u=12032832', time:3000, title:'SS934#【五皇冠七十二变时尚屋】韩版2010夏装潮人短袖T恤', target:'_blank'} ] //构造函数 var Jsplayer=function(id,pics,w,h) { this.id=id; this.pics=pics; this.width=w; this.height=h; this.index=0; this.preimg=null; } Jsplayer.prototype.createFlash=function(){ var self=this; h=self.height; w=self.width; pics=self.pics; var player=$("#"+self.id); var images=[];//存储图片 player.append("<div id='playercontent'></div>"); player.css("height",h+"px").css("width",w+"px").css("border","1px solid #F27B04"); //生成图片 for(var i=0;i<this.pics.length;i++) { var imga=$("<a href='"+this.pics[i].link+"' title='"+this.pics[i].title+"' target='"+this.pics[i].target+"'></a>"); img=$("<img src='"+this.pics[i].url+"' alt='"+this.pics[i].title+"'/>").css("width",w+"px").css("height",h+"px"); imga.append(img).css("z-index",i).hide(); images[i]=imga; $("#playercontent").append(imga); } //根据player层定位按钮区 playeroffset=player.offset(); player.append('<div id="picbtn" style="position:absolute;top:'+(playeroffset.top+h-25)+'px;left:'+(playeroffset.left+parseInt(3*w/4))+'px;width:'+parseInt(w/4)+'px;height:20px;z-index:10000;"></div>'); //根据player层定位标题区 标题:按钮=3:1 player.append('<div id="titles" style="position:absolute;top:'+(playeroffset.top+h-25)+'px;left:'+playeroffset.left+'px;width:'+parseInt(3*w/4)+'px;height:20px;z-index:10000;"></div>'); $("#picbtn").append('<div id="picbtns" style="float:right; padding-right:1px;"></div>'); //生成按钮 for(i=0;i<this.pics.length;i++) { $("#picbtns").append('<span id="'+i+'" class="playera"> '+(i+1)+' </span> '); } // images[0].fadeIn("slow"); self.preimg=images[0];//存储前一图片 var timer=null;//即时器 var prebtn=$("#picbtns #0");//存储前一按钮 //点击事件 $("#picbtns .playera").click(function(){ id=this.id; prebtn.removeClass("playeraselected"); prebtn=$(this).addClass("playeraselected"); self.preimg.hide(); images[id].fadeIn("slow"); $("#titles").html(pics[id].title); self.preimg=images[id]; clearTimeout(timer); timer=setTimeout(function(){ nextid=parseInt(id)+1; if(nextid>images.length-1) { nextid=0; } $("#picbtns #"+nextid).click(); },pics[id].time); }); $("#picbtns #0").click(); }; function getCurrentTimeSeconds(){ var d=new Date(); var hour=d.getHours(); var minute=d.getMinutes(); var seconds=d.getSeconds(); return hour*60*60+minute*60+seconds; } aplayer=new Jsplayer("myplayer",picss,400,400); aplayer.createFlash();
?