第一种方法：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>图片自动切换 图片轮播</title>
    <style type="text/css">
        /*注意 第一张图片z-index值是5，后面的图片值为1*/
        *{margin: 0;padding: 0;}
        .banner {
            width: 1200px;
            height: 688px;
            position: relative;
            overflow: hidden;
            background-position: center;
        }

        .banner_slide_1 {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            transition: opacity 0.5s;
            opacity: 1;
            z-index: 5;
        }

        .banner_slide_2 {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            transition: opacity 0.5s;
            opacity: 0;
            z-index: 1;
        }

        .banner_slide_3 {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            transition: opacity 0.5s;
            opacity: 0;
            z-index: 1;
        }
    </style>

</head>

<body>

<div class="banner">
    <div class="banner_slide_1" id="banner1"><img src="./imgs/1.jpg" alt="" /></div>
    <div class="banner_slide_2" id="banner2"><img src="./imgs/2.jpg" /></div>
    <div class="banner_slide_3" id="banner3"> <img src="./imgs/3.jpg" /></div>
</div>
<script type="text/javascript">
    window.onload=function bannerSlide() {
        var i = 0;
        var banner = new Array//将图片创建为一个数组
        banner[0] = document.getElementById("banner1");
        banner[1] = document.getElementById("banner2");
        banner[2] = document.getElementById("banner3");
        sli = setInterval(slide, 3000); //轮播间隔时间
        function slide() {
            if (i == banner.length - 1) {
                banner[0].style.display = "block";
                banner[0].style.opacity = "1";
                banner[i].style.opacity = "0";
                setTimeout(function() {
                    banner[i].style.display = "none";
                    banner[i].style.zIndex = "1";
                    banner[0].style.zIndex = "5";
                    i = 0;
                }, 500)
            } else {
                banner[i + 1].style.display = "block";
                banner[i + 1].style.opacity = "1";
                banner[i].style.opacity = "0";
                setTimeout(function() {
                    banner[i + 1].style.zIndex = "5";
                    banner[i].style.display = "none";
                    banner[i].style.zIndex = "1";
                    i++;
                }, 500)
            }
        }
    }
</script>
</body>

</html>

第二种方式：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *{padding: 0;margin: 0;
        }
        .banner {
            width: 100%;
            min-width: 1200px;
            height: 688px;
            overflow: hidden;
        }

        .banner_index {
            position: relative;
        }

        .banner_slide_1 {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            transition: opacity 0.5s;
            opacity: 1;
            z-index: 5;
            background: url(imgs/1.jpg) no-repeat;
            background-position: 30% 30%;

        }

        .banner_slide_2 {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
            transition: opacity 0.5s;
            opacity: 0;
            z-index: 1;
            background: url(./imgs/2.jpg) no-repeat;
            background-position: 30% 30%;
        }

        .banner_slide_3 {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
            transition: opacity 0.5s;
            opacity: 0;
            z-index: 1;
            background: url(imgs/3.jpg) no-repeat;
            background-position: 30% 30%;
        }
    </style>
    <script type="text/javascript">
        window.onload=function bannerSlide() {
            if (!document.getElementById) return false;
            if (!document.getElementsByTagName) return false;
            if (!document.getElementById("bannerBox")) return false;
            var i = 0;
            var box = document.getElementById("bannerBox");
            var banner = box.getElementsByTagName("div");
            sli = setInterval(slide, 4000); //轮播间隔时间
            function slide() {
                if (i === banner.length - 1) {
                    banner[0].style.display = "block";
                    banner[0].style.opacity = "1";
                    banner[i].style.opacity = "0";
                    setTimeout(function() {
                        banner[i].style.display = "none";
                        banner[i].style.zIndex = "1";
                        banner[0].style.zIndex = "5";
                        i = 0;
                    }, 500) //动画过渡时间，搭配CSS使用
                } else {
                    banner[i + 1].style.display = "block";
                    banner[i + 1].style.opacity = "1";
                    banner[i].style.opacity = "0";
                    setTimeout(function() {
                        banner[i + 1].style.zIndex = "5";
                        banner[i].style.display = "none";
                        banner[i].style.zIndex = "1";
                        i++;
                    }, 500)
                }
            }
        }
    </script>

</head>

<body>

<div id="bannerBox" class="banner banner_index">
    <div class="banner_slide_1" id="banner1"></div>
    <div class="banner_slide_2" id="banner2"></div>
    <div class="banner_slide_3" id="banner3"></div>
</div>

</body>

</html>

轮播图2种方法

第一种方法：

第二种方式：

猜你喜欢