JS图片切换效果，结合CSS仿淘宝taobao首页轮播原生js面对对象封装版，刚学习JS面向对象，今天周末没地方应聘就在租的地方倒腾点东西，可能不入各位牛人的法眼，不过能帮小弟分析分析代码，小弟就不甚荣幸。我用的是改变透明度的办法，图片是淘宝的首页图片，最大限制是5张图片轮播，好像这个又叫焦点图来着。。。反正我是叫轮播。。。
演示：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><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,//子容器ulimglist:null,//子容器imgnumlist:null,//子容器countNumindex: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=3;runimg.imgurl=["<img src="/uploads/common/images/1.jpg"/>","<img src="/uploads/common/images/2.jpg"/>","<img src="/uploads/common/images/3.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><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></div>提示：可修改后代码再运行!
上一篇 javascript初学者:全面学习对象概念
下一篇 Ajax+Javascript动态生成文本输入框