面向对象之图片自动切换

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>