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

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

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

猜你喜欢