首页 > 代码库 > 面向对象之图片自动切换
面向对象之图片自动切换
图片自动切换一:
css样式: <style> *{ padding: 0; margin: 0; } div{ width:600px; height: 320px; background-color: pink; margin:10px auto; text-align: center; border-radius: 30px; } input{ width: 50px; height: 30px; } ul li{ list-style-type: none; margin-top: 10px; display:none; } </style> 结构: <div id="divTab"> <input type="button" value="学"/> <input type="button" value="不"/> <input type="button" value="好"/> <input type="button" value="更"/> <input type="button" value="要"/> <input type="button" value="学"/> <ul> <li><img src="../images/1.jpg" alt="" style="width: 500px;height: 250px;"/></li> <li><img src="../images/2.jpg" alt="" style="width: 500px;height: 250px;"/></li> <li><img src="../images/3.jpg" alt="" style="width: 500px;height: 250px;"/></li> <li><img src="../images/4.jpg" alt="" style="width: 500px;height: 250px;"/></li> <li><img src="../images/5.jpg" alt="" style="width: 500px;height: 250px;"/></li> <li><img src="../images/6.jpg" alt="" style="width: 500px;height: 250px;"/></li> </ul> </div> js脚本: <script> //定一个函数,根据id返回对应的标签对象 function $db(id){ return document.getElementById(id); } //构造函数 function SwitchPic(divId){ //获取div this.divObj=$db(divId); //获取所有的按钮 this.btnObjs=this.divObj.getElementsByTagName("input"); //获取ul this.ulObj=this.divObj.getElementsByTagName("ul")[0]; //获取ul中的所有li标签对象 this.lis=this.ulObj.children; } //原型添加方法 SwitchPic.prototype.init=function(){ //先让第一个按钮有背景颜色和第一个li标签显示 this.btnObjs[0].style.backgroundColor="yellow"; this.lis[0].style.display="block"; //把当前的实例对象this先存储起来 var _this=this; //遍历所有按钮,并注册事件 for(var i=0;i<this.btnObjs.length;i++){ this.btnObjs[i].index=i; //添加一个自定义属性 this.btnObjs[i].onclick=function(){ // //排它 // for(var j=0;j<_this.btnObjs.length;j++){ // _this.btnObjs[j].style.backgroundColor=""; // _this.lis[j].style.dsiplay="none"; // } // //设置当前的按钮样式 // this.style.backgroundColor="yellow"; // //设置显示按钮对应li标签的样式 // _this.lis[this.index].style.display="block"; _this.setImages(this); } } } SwitchPic.prototype.setImages=function(obj){ //排它 for(var j=0;j<this.btnObjs.length;j++){ this.btnObjs[j].style.backgroundColor=""; this.lis[j].style.display="none"; } //设置当前的按钮样式 obj.style.backgroundColor="yellow"; //设置显示按钮对应li标签的样式 this.lis[obj.index].style.display="block"; } SwitchPic.prototype.autoPlay=function(){ var _this=this; _this.index=0; //添加一个自定义属性 setInterval(function(){ _this.index++; //console.log(_this.index); if(_this.index>5){ _this.index=0; } //调用设置图片的方法,并且传入当前的按钮的对象 _this.setImages(_this.btnObjs[_this.index]); },1000); } //实例化对象,调用方法 var bb=new SwitchPic("divTab"); bb.init(); bb.autoPlay(); </script>
面向对象之图片自动切换
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。