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.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></div>提示:可修改后代碼再運行!
上一篇 javascript初學者:全面學習對象概念
下一篇 Ajax+Javascript動態生成文本輸入框
程序員人生,我編程,我富裕,記住wfuyu網,php教程,php學習,php手冊,CMS模版制作
聲明:本站大部分內容是作者原創,少部分收集于互聯網供大家一起學習,原版權很多不明,如有侵權請聯系本站,謝謝!
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有