用H5和CSS3制作全屏背景轮换播放教程

来源：懂视网责编：小采时间：2020-11-27 15:27:34

用H5和CSS3制作全屏背景轮换播放教程

用H5和CSS3制作全屏背景轮换播放教程:这次给大家带来用H5和CSS3制作全屏背景轮换播放的制作方法，怎么用H5制作特效？H5和CSS3在使用过程中的注意事项有哪些，下面就是实战案例，一起来看一下。<!doctype html> <html> <head> <meta charset=&qu

推荐度：

点击下载本文 文档为doc格式

导读用H5和CSS3制作全屏背景轮换播放教程:这次给大家带来用H5和CSS3制作全屏背景轮换播放的制作方法，怎么用H5制作特效？H5和CSS3在使用过程中的注意事项有哪些，下面就是实战案例，一起来看一下。<!doctype html> <html> <head> <meta charset=&qu

这次给大家带来用H5和CSS3制作全屏背景轮换播放的制作方法，怎么用H5制作特效？H5和CSS3在使用过程中的注意事项有哪些，下面就是实战案例，一起来看一下。

<!doctype html>
<html>
 <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>

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

用H5和CSS3制作全屏背景轮换播放教程

推荐度：

点击下载本文 文档为doc格式

标签：背景制作全屏

热门焦点

用H5和CSS3制作全屏背景轮换播放教程

用H5和CSS3制作全屏背景轮换播放教程

用H5和CSS3制作全屏背景轮换播放教程

最新推荐

猜你喜欢

热门推荐