利用jQuery中的bgstretcher插件制作幻灯片效果背景

来源：互联网发布：自由行软件编辑：程序博客网时间：2024/05/21 09:25

通过jQuery插件制作幻灯片效果的网页背景

步骤：
1. 下载bgstretcher插件：http://www.jq22.com/search?seo=bgstretcher
2. 将下载的插件，网页与背景图片放在同一根目录下
3. 在html中声明对背景的设置，放在head中：

<link rel = "stylesheet" type = "text/css" href = "main.css" /><link rel = "stylesheet" type = "text/css" href = "bgstretcher.css" /><script type = "text/javascript" src = "jquery-1.5.2.min.js"> </script><script type = "text/javascript" src = "bgstretcher.js"></script>

<!--设置滑动背景--><script type = "text/javascript">    $(document).ready(function(){    $('.body-background').bgStretcher({    images:[    //可以自己加入图片的URL；    '410901.jpg',    'grass_light_background_87014_1920x1080.jpg',    'paradise-5_00451020.jpg',    'road_covered_with_snow-wallpaper-2560x1024.jpg',    'foggy_forest_3-wallpaper-1920x1080.jpg',],    imageHeight:400,    slideDirection:'N',    slideShowSpeed:3200,    transitionEffect:'fade',    sequenceMode:'normal',    });    });</script>`

在body中插入class = “body-background”,就可进行背景设置。
所有源码：

<!DOCTYPE html><html><head><title>Background stretcher Demo</title><link rel = "stylesheet" type = "text/css" href = "main.css" /><link rel = "stylesheet" type = "text/css" href = "bgstretcher.css" /><script type = "text/javascript" src = "jquery-1.5.2.min.js"> </script><script type = "text/javascript" src = "bgstretcher.js"></script><!--设置滑动背景--><script type = "text/javascript">    $(document).ready(function(){    $('.body-background').bgStretcher({    images:[    '410901.jpg',    'grass_light_background_87014_1920x1080.jpg',    'paradise-5_00451020.jpg',    'road_covered_with_snow-wallpaper-2560x1024.jpg',],    imageHeight:400,    slideDirection:'N',    slideShowSpeed:3200,    transitionEffect:'fade',    sequenceMode:'normal',    });    });</script></head><body class = "body-background"></body></html>

阅读全文

0 0