欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

CSS3全屏背景轮换播放

 

<!doctype html>

<html lang="zh">

 

  <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   

    <title>全屏背景轮换播放</title>

                   <meta name="keywords" content="全屏背景轮换播放" />

     </head>

 

  <body>

    <style>

      #bg{ position:fixed; top:0; left:0; bottom:0; right:0; z-index:-1; filter:alpha(opacity=100);

      -moz-opacity:1; -khtml-opacity: 1; opacity: 1; } #bg > img { height:100%;

      width:100%; border:0; }

    </style>

   

    <body>

      <div id="bg">

        <img src="./bg/3.jpg">

      </div>

      <script src="./js/jquery.js"></script>

<script type="text/javascript">

        var num = 0;

        var bg_src = new Array("./bg/1.jpg", "./bg/2.jpg","./bg/4.jpg", "./bg/6.jpg", "./bg/7.jpg","./bg/8.jpg");

        //这个数组就是背景图的地址

        setInterval("showTime()", 5000);//定时时间,5

        function showTime() {

          if (num == bg_src.length) {

            num = 0;

          }

           $("#bg").fadeOut(1000,function(){

                        $("#bg").html('<img src="' + bg_src[num] + '">');

                        $("#bg").fadeIn(1000);

           })

          num = num + 1;

        }

      </script>

     

      <div style="width: 100%; height: 50px; line-height: 50px; text-align: center; color: #fff; position: absolute; bottom: 0px;">

                                     </div>

                   <div style="width: 300px; height: 235px; background: #fff; position: fixed; top: 0px; z-index: 10000; right: 0px;">

                                     <script type="text/javascript">

                                                  

                                                   var cpro_id = "u2580454";

                                               </script>

                                               <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>   

                            </div>

     

    </body>

 

</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c15753.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-12-20 10:27 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。