为网页添加动态背景 (背景轮播)

风之吻网站开发 2024-11-03 501

为网页添加动态背景 (背景轮播)-第1张图片-风享汇

┃设置网页背景

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全屏背景</title>
    <script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$.backstretch('http://www.scfzw.cn/api/mn/img/feng552.jpg');
</script>
</body>
</html>

┃多张张图片切换

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全屏背景切换</title>
    <script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$.backstretch([
        'http://www.scfzw.cn/api/mn/img/feng0552.jpg',
        'http://www.scfzw.cn/api/mn/img/feng0553.jpg',
        'http://www.scfzw.cn/api/mn/img/feng0554.jpg',
        'http://www.scfzw.cn/api/mn/img/feng0555.jpg',
        'http://www.scfzw.cn/api/mn/img/feng0556.jpg'
    ], {
        fade : 1000, // 动画时长
        duration : 2000 // 切换延时
});
</script>
</body>
</html>

标签： html

本文地址： http://hui.fzwqq.com/post/126.html

文章来源：风之吻