JS图片轮播

DOCTYPE html>
html>

    head>
        meta charset="UTF-8">
        title>Carousel·轮播title>
        style>
            div.outer {
                width: 200px;
                height: 200px;
                border: 1px solid #CCC;
                /*留点边界,美观*/
                padding: 5px;
            }
            
            div.per {
                /*充满父div*/
                width: 100%;
                height: 100%;
                /*border: 1px solid #CCC;这个留着的话，ahShadow层有一个px的误差对不齐*/
                /*默认不显示*/
                display: none;
            }
            
            .per .pic {
                height: 100%;
                width: 100%;
            }
            
            .per .title {
                color: blue;
                font-family: "微软雅黑";
                /*位置调整*/
                position: relative;
                bottom: 25px;
                left: 5px;
            }
            
            div.ahShadow {
                height: 20px;
                width: 100%;
                background-color: #666;
                /*位置调整*/
                position: relative;
                bottom: 20px;
                /*透明度*/
                opacity: 0.5;
                /*透明度——IE不支持opacity*/
                filter: alpha(opacity=50);
            }
            /*↓↓↓按钮*/
            
            .divBtns {
                position: relative;
                bottom: 40px;
                right: 5px;
                /*右置*/
                float: right;
            }
            
            .divBtns a {
                width: 20px;
                height: 20px;
                background-color: #50F0D8;
                /*文字处理*/
                text-align: center;
                text-decoration: none;
                /*行内块显示*/
                display: inline-block;
            }
        style>

    head>

    body>
        div class="outer">
            div class="per">
                img class="pic" src="img/sh1.png" />
                div class="title">图片1div>
            div>

            div class="per">
                img class="pic" src="img/sh2.png" />
                div class="title">图片2div>
            div>
            
            div class="ahShadow">div>
            
            div class="divBtns" id="btn-ahref">
                
                a href="javascript:void(0)" class="abtn">1a>
                a href="javascript:void(0)" class="abtn">2a>
            div>
        div>

        script>
            var divlist = document.getElementsByClassName("per");
            var btns = document.getElementsByClassName("abtn");

            function picShow(idx) {
                // 图片显示
                divlist[idx].style.display = "block";
                // 按钮变色
                btns[idx].style.backgroundColor = "#FFF";
            }

            function picHiden(idx) {
                divlist[idx].style.display = "none";
                btns[idx].style.backgroundColor = "#50F0D8";
            }

            //自动轮播
            function autoShow() {

                for (var i = 0; i  divlist.length; i++) {

                    if (divlist[i].style.display == "block") {
                        // 让显示的图片不显示
                        picHiden(i);

                        // 下一张显示
                        if (i == divlist.length - 1) {
                            picShow(0);
                        } else {
                            picShow(i + 1);
                        }
                        // 做完了就撤
                        break;
                    }

                }
            }
            // 初始化
            picShow(0);

            // 定时轮播
            setInterval("autoShow()", 5000);
        script>
        script>
            // 手动轮播
            debugger;
            for (i = 0; i  btns.length; i++) {

                //i是不停在变的，每次循环要把i的当前值固定下来 
                // 自定义一个属性“idx”来存放i的值
                btns[i].idx = i;

                btns[i].onclick = function() {
                    // 当前下标对应的图片可见，其余图片不可见
                    for (j = 0; j  divlist.length; j++) {
                        picHiden(j);
                    }
                    picShow(this.idx);
                }
            }
        script>
    body>

html>