JavaScript学习之图片淡入淡出

来源：互联网发布：华为手机修改mac地址编辑：程序博客网时间：2024/06/05 17:25

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>

阅读全文

0 0