原生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就无法被正确的撑开，为我们的页面布局带来了困扰。
再其次的问题是，这个轮播图主要意图是用于页面顶部的巨大的横幅广告，但是在写代码时并没有考虑到面对不同分辨率情况下的展现效果，因此还有许多改良的空间。

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

这是之前有问题的代码:

<!DOCTYPE html>

<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>

以下为改良后的代码：

<!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: 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

欢迎转载，但请注明出处，谢谢！

巴特西

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

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

最新文章

热门文章

巴特西

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

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

最新文章

热门文章

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