JavaScript学习之图片淡入淡出

js代码：

<script type="text/javascript">
        var timer;
        //鼠标移入移出事件
        //获取所有的div
        var divbg = document.getElementsByClassName("divbg")[0];
        //鼠标移上去计时器停止
        divbg.onmouseenter = function() {
            clearInterval(timer);
        }
        //鼠标移开计时器开始
        divbg.onmouseleave = function() {
            timer = setInterval(function () {
            showimg("right");
        }, 2000)
        }
        //鼠标点击左右按钮事件
        //获取左右按钮
        var left = document.getElementsByClassName("btn_left")[0];
        var right = document.getElementsByClassName("btn_right")[0];
        //左按钮点击事件
        left.onclick = function() {
            showimg("left");
        }
        //右按钮点击事件
        right.onclick = function() {
            showimg("right");
        }
        //实现图片的淡入淡出
        //获取所有的图片元素
        var img_info = document.getElementsByClassName("img_list");
        //给所有的图片加上z-index样式，使第一个图片在最上边，然后依次排列
        for(var i = 0; i < img_info.length; i++) {
            img_info[i].style.zIndex = img_info.length - i - 1;
            //将第一个图片下边的图片隐藏
            if(i != 0) {
                img_info[i].style.opacity = 0;
            }
        }
        //构造函数
        function showimg(isleftorright) {
            //让所有的图片的z-index样式索引循环加1，将下一张图片显示出来
            for(var i = 0; i < img_info.length; i++) {
                var zindex = parseInt(img_info[i].style.zIndex); //将z-index转化为整型
                if(isleftorright == "right") {
                    zindex += 1; //+1
                    if(zindex > 5) {
                        zindex = 0;
                        img_info[i].style.opacity = 0;
                    }
                    if(zindex == 5) {
                        img_info[i].style.opacity = 1;
                    }
                }
                else{
                        zindex -= 1; //-1
                    if(zindex < 0) {
                        zindex = 5;
                        img_info[i].style.opacity = 1;
                    }
                    if(zindex == 4) {
                        img_info[i].style.opacity = 0;
                    }
                }
                img_info[i].style.zIndex = zindex; //索引值-1
            }
        }
        timer = setInterval(function () {
            showimg("right");
        }, 2000)
    </script>

css代码：

        .divbg {
            width: 1000px;
            height: 424px;
            border: 1px #000 solid;
            margin: 0 auto;
            position: relative;
        }

        .img_list {
            position: absolute;
            transition: all 2s linear;
        }

        .btn_left,
        .btn_right {
            width: 60px;
            height: 120px;
            line-height: 120px;
            display: block;
            font-size: 5em;
            color: #fff;
            position: absolute;
            z-index: 10;
            cursor: pointer;
        }

        .btn_left {
            top: 152px;
        }

        .btn_right {
            right: 0px;
            top: 152px;
        }

        .btn_left:hover {
            background-color: #000;
            opacity: 0.5;
        }

        .btn_right:hover {
            background-color: #000;
            opacity: 0.5;
        }

html代码：

    <div class="divbg">
        <span class="btn_left"> < </span>
        <span class="btn_right"> > </span>
        <img class="img_list" src="img/visual_slide01.jpg" />
        <img class="img_list" src="img/visual_slide02.jpg" />
        <img class="img_list" src="img/visual_slide03.jpg" />
        <img class="img_list" src="img/visual_slide04.jpg" />
        <img class="img_list" src="img/visual_slide05.jpg" />
        <img class="img_list" src="img/visual_slide06.jpg" />
    </div>