Rumah > Artikel > hujung hadapan web > 用H5和CSS3制作全屏背景轮换播放教程
这次给大家带来用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>
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
Atas ialah kandungan terperinci 用H5和CSS3制作全屏背景轮换播放教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!