原生幻灯片封装学习

javascript部分

(function(window,document) {
    var broadcast = function(cla,options) {
        // 判断是用函数创建的还是用new创建的。这样我们就可以通过broadcast("dom") 或 new broadcast("dom")来使用
        if (!(this instanceof broadcast)) return new broadcast(cla, options);
        // 排序图片的层叠位置
        var front = this.nameclass(cla),//获取的class元素组
            img = this.childer(front),
            imglength = img.length,
            jishu = 0,
            _this = this,intr;
        for (var r in img) {
            if (r == 0) {
                img[r].style.csstext= 'z-index:' + (imglength - r) + ';position:absolute;opacity:1;transition:0.5s;';
            } else {
                img[r].style.csstext= 'z-index:' + (imglength - r) + ';position:absolute;opacity:0;transition:0.5s;';
            }
        }
        //设置选择器 
        if(options.spot=="true"){
                if(options.selector!=undefined){
                    for(var i=0;i<imglength;i++){
                        var domspan = document.createelement('span');
                        if(i==0){
                            domspan.setattribute('class',options.current)
                        }
                        this.nameclass(options.selector)[0].appendchild(domspan)
                    } 
                }
        }
        var spotdom = this.nameclass(options.selector)[0].children;
        // 给选择器添加点击事件
        for(var y=0;y<spotdom.length;y++){
            spotdom[y].index = y;
            if(y!=0){
                spotdom[y].setattribute('class','');
            }
            spotdom[y].onclick=function(){
               this.setattribute('class',options.current)
               jishu=this.index;
               _this.front(img,jishu,spotdom);
            }
        }
         // 给两个箭头绑定点击事件
        if(options.leftarrow!=undefined&&options.rightarrow!=undefined){
            this.nameclass(options.leftarrow)[0].onclick=function(){
                if(jishu==0){
                    jishu=imglength-1
                }else{
                    jishu--
                }
                _this.front(img,jishu,spotdom);
            }
            this.nameclass(options.rightarrow)[0].onclick=function(){
                if(jishu==imglength-1){
                    jishu=0;
                }else{
                    jishu++
                }
                _this.front(img,jishu,spotdom);
            }
        }
        // 自动播放
        var bof = function(){
            intr = setinterval(function() {
            if(img.length-1==jishu){
                jishu=0;
                }else{
                    jishu++
                }
                _this.front(img,jishu,spotdom)
            }, 2000);
        }
        bof();
        // 鼠标经过停止
        front[0].onmouseover = function(){
            intr = clearinterval(intr);
        }
        // 鼠标离开播放
        front[0].onmouseout = function(){
            bof();
        }
    }
    broadcast.prototype = {
        nameclass: function(mingzi) { //获取class元素组
            var obj = [];
            var jia = 0;
            var dom = document.getelementsbytagname('*');
            for (var i in dom) {
                if (dom[i].nodetype == 1) {
                    if (dom[i].getattribute('class') === mingzi) {
                        obj[jia] = dom[i];
                        jia++
                    }
                }
            }
            return obj;
        },
        childer: function(father,name) { //获取子集元素组
            var obj2 = [],
                j = 0;
            var dom = father[0].children[0].childnodes;

            for (var h in dom) {
                if (dom[h].nodetype == 1) {
                    obj2[j] = dom[h];
                    j++
                }
            }
            return obj2;
        },
        front: function(dom2,cishu,xuan) {
            var dom2length = dom2.length;
            for (var r in dom2) {
                if (r == cishu) {
                    dom2[r].style.opacity='1';
                    xuan[r].setattribute("class",'current-dan')
                } else {
                    dom2[r].style.opacity='0';
                    xuan[r].setattribute("class",'')
                }
            }

        }
    }
    // 暴露方法
    window.broadcast = broadcast;
})(window, document);

html结构部分

<div class="boy">
        <div class="img-box">
            <a href="" title="" ><img src="img/timg(1).png" alt=""></a>
            <a href="" title="" ><img src="img/timg(2).png" alt=""></a>
            <a href="" title="" ><img src="img/timg(3).png" alt=""></a>
            <a href="" title="" ><img src="img/timg.png" alt=""></a>
        </div>
        <div class="selector"></div>
        <div class="left-att"><</div>
        <div class="right-att">></div>
    </div>

css部分

.boy{
    width: 1103px;
    margin: 0 auto;
    height: 714px;
    position: relative;
}
.img-box{
    height: 714px;
}
.img-box a{
    float: left;
}
/* 设置圆点的样式 */
.selector{
    width: 96px;
    position: absolute;
    left: 50%;
    margin-left: -48px;
    bottom: 20px;
    z-index: 222;
}
.selector span{
    float: left;
    margin-left: 10px;
    border-radius: 100px;
    background-color: #999;
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.selector .current-dan{
    background-color: #13af13;
}
/* 设置箭头的位置 */
.left-att{
    position: absolute;
    left: 20px;
    margin-top: -20px;
    top: 50%;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    z-index: 222;
    cursor: pointer;
}
.right-att{
    position: absolute;
    right: 20px;
    margin-top: -20px;
    top: 50%;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 222;
}