CSS3全屏背景轮换播放

2019-09-13 郑州网站建设  

<!doctype html>

<html lang=http://www.divcss5.com/css3-style/"zh">

 

  <head>

    <meta charset=http://www.divcss5.com/css3-style/"UTF-8">

    <meta http-equiv=http://www.divcss5.com/css3-style/"X-UA-Compatible" content=http://www.divcss5.com/css3-style/"IE=edge,chrome=1">

    <meta name=http://www.divcss5.com/css3-style/"viewport" content=http://www.divcss5.com/css3-style/"width=device-width, initial-scale=1.0">

   

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

                   <meta name=http://www.divcss5.com/css3-style/"keywords" content=http://www.divcss5.com/css3-style/"全屏背景轮换播放" />

     </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=http://www.divcss5.com/css3-style/"bg">

        <img src=http://www.divcss5.com/css3-style/"./bg/3.jpg">

      </div>

      <script src=http://www.divcss5.com/css3-style/"./js/jquery.js"></script>

<script type=http://www.divcss5.com/css3-style/"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=http://www.divcss5.com/css3-style/"' + bg_src[num] + '">');

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

           })

          num = num + 1;

        }

      </script>

     

      <div style=http://www.divcss5.com/css3-style/"width: 100%; height: 50px; line-height: 50px; text-align: center; color: #fff; position: absolute; bottom: 0px;">

                                     </div>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2176.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • lang
  • CSS3