通过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>