原生js+css3实现图片自动切换,图片轮播

运用CSS3transition及opacity属性 制作图片轮播动画

自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播

运用css3的opacity透明度属性和transition动画过度属性,用js对过程加以控制,也实现了js对CSS3中transition动画的触发

实例链接地址:http://pspgbhu.github.io/opacity

今天突然发现这个代码有问题,主要出在html/css上,问题主要是由于使用了position:absolute定位,同时banner这个div中又没有其他元素,因此这个div就无法被正确的撑开,为我们的页面布局带来了困扰。
再其次的问题是,这个轮播图主要意图是用于页面顶部的巨大的横幅广告,但是在写代码时并没有考虑到面对不同分辨率情况下的展现效果,因此还有许多改良的空间。


想了想还是不把之前有问题的代码删掉了,正确代码在最后面

这是之前有问题的代码:


<html>

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

            .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>
        <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, 5000); //轮播间隔时间
                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>
    head>

    <body>

        <div class="banner">
            <div class="banner_slide_1" id="banner1"><img src="img/banner.jpg" alt="" />div>
            <div class="banner_slide_2" id="banner2"><img src="img/banner02_02.jpg" />div>
            <div class="banner_slide_3" id="banner3"> <img src="img/banner3.jpg" />div>
        div>

    body>

html>


以下为改良后的代码:


<html>

    <head>
        <meta charset="utf-8" />
        <title>title>
        <style type="text/css">
            *{padding: 0;margin: 0;
            }
            .banner {
                width: 100%;
                min-width: 1200px;
                height: 488px;
                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(img/banner.jpg) no-repeat;
                background-position: center 0;
            }

            .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(img/banner02_02.jpg) no-repeat;
                background-position: center 0;
            }

            .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(img/banner3.jpg) no-repeat;
                background-position: center 0;
            }
        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>



作者博客:[pspgbhu](http://ghosertblog.github.com)

作者GitHub:https://github.com/pspgbhu

欢迎转载,但请注明出处,谢谢!

 

转载于:https://www.cnblogs.com/pspgbhu/p/5705981.html

你可能感兴趣的:(原生js+css3实现图片自动切换,图片轮播)