先看效果
复制代码
<!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=utf-8" /> <title>taobao首页轮播原生js面向对象封装版</title> <style> <!-- body, ul, li, p { margin: 0; padding: 0; } ul{ list-style-type:none; } body { font-family:"Times New Roman", Times, serif; } #box { position:relative; width:492px; height:172px; margin:10px auto; } #box .imgList{ position:relative; width:490px; height:170px; overflow:hidden; } #box .imgList li{ position:absolute; top:0; left:0; width:490px; height:170px; } #box .countNum{ position:absolute; right:0; bottom:5px; } #box .countNum li{ width:20px; height:20px; float:left; color:#fff; border-radius:20px; background:#f90; text-align:center; margin-right:5px; cursor:pointer; opacity:0.7; filter:alpha(opacity=70); } #box .countNum li.current{ background:#f60; font-weight:bold; opacity:1; filter:alpha(opacity=70); } --> </style> <script> <!-- function runImg(){} runImg.prototype={ bigbox:null,//最外层容器 boxul:null,//子容器ul imglist:null,//子容器img numlist:null,//子容器countNum index:0,//当前显示项 timer:null,//控制图片转变效果 play:null,//控制自动播放 imgurl:[],//存放图片 count:0,//存放的个数 $:function(obj) { if(typeof(obj)=="string") { if(obj.indexOf("#")>=0) { obj=obj.replace("#",""); if(document.getElementById(obj)) { return document.getElementById(obj); } else { alert("没有容器"+obj); return null; } } else { return document.createElement(obj); } } else { return obj; } }, //初始化 info:function(id) { this.count=this.count<=5?this.count:5; this.bigbox=this.$(id); for(var i=0;i<2;i++) { var ul=this.$("ul"); for(var j=1;j<=this.count;j++) { var li=this.$("li"); li.innerHTML=i==0?this.imgurl[j-1]:j; ul.appendChild(li); } this.bigbox.appendChild(ul); } this.boxul=this.bigbox.getElementsByTagName("ul"); this.boxul[0].className="imgList"; this.boxul[1].className="countNum"; this.imglist=this.boxul[0].getElementsByTagName("li"); this.numlist=this.boxul[1].getElementsByTagName("li"); this.numlist[0].className="current"; }, //封装程序入口 action:function(id) { this.autoplay(); this.mouseoverout(this.bigbox,this.numlist); }, //图片切换效果 imgshow:function(num,numlist,imglist) { this.index=num; var alpha=0; for(var i=0;i<numlist.length;i++) { numlist[i].className=""; } numlist[this.index].className="current"; clearInterval(this.timer); for(var j=0;j<imglist.length;j++) { imglist[j].style.opacity=0; imglist[j].style.filter="alpha(opacity=0)"; } var $this=this; //利用透明度来实现切换图片 this.timer=setInterval(function(){ alpha+=2; if(alpha>100){alpha=100};//不能大于100 //为兼容性赋样式 imglist[$this.index].style.opacity=alpha/100; imglist[$this.index].style.filter="alpha(opacity="+alpha+")"; if(alpha==100){clearInterval($this.timer)};//当等于100的时候就切换完成了 },20)//经测试20是我认为最合适的值 }, //自动播放 autoplay:function(){ var $this=this; this.play=setInterval(function(){ $this.index++; if($this.index>$this.imglist.length-1){$this.index=0}; $this.imgshow($this.index,$this.numlist,$this.imglist); },2000) }, //处理鼠标事件 mouseoverout:function(box,numlist) { var $this=this; box.onmouseover=function() { clearInterval($this.play); } box.onmouseout=function() { $this.autoplay($this.index); } for(var i=0;i<numlist.length;i++) { numlist[i].index=i; numlist[i].onmouseover=function(){ $this.imgshow(this.index,$this.numlist,$this.imglist); } } } } window.onload=function(){ var runimg=new runImg(); runimg.count=5; runimg.imgurl=[ "<img src=\"//ku.shouce.ren/files/images/201601/56a34a983a5f2.jpg\"/>", "<img src=\"//ku.shouce.ren/files/images/201601/56a34a9b0aa0b.jpg\"/>", "<img src=\"//ku.shouce.ren/files/images/201601/56a34a9e8992e.jpg\"/>", "<img src=\"//ku.shouce.ren/files/images/201601/56a34aa0cfac2.jpg\"/>", "<img src=\"//ku.shouce.ren/files/images/201601/56a34aa497189.jpg\"/>"]; runimg.info("#box"); runimg.action("#box"); } --> </script> </head> <body> <center><h1>Author:wyf</h1><p>2012/2/24</p></center> <div id="box"></div> </body> </html>
本文暂无评论 - 欢迎您