转自：http://blog.dvxj.com/pandola/jQuery_bgStretcher.html

bgStretcher 2011 (Background Stretcher)是一个jQuery的插件，可以为你的网页添加多张背景图，且多个背景图能够自动切换，同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出，滚动，幻灯，其中选用滚动和幻灯时，可以选择方向，上下左右，或者左上右下，右上左下。图片切换顺序也可以设置正向，反向或者随机。更多选项就看你自己慢慢研究了。 插件特点：

　　脚本文件简洁，设置简单；支持所有新版浏览器；支持单张或者多张图片。
插件使用：
　　首先，你当然要把插件先下载再说，插件包里已经包含了所需要的JS文件。
　　然后，把下面的代码插入到你网页的<head>和</head>之间，这样后面才能使用插件，注意代码中的路径，至于是相对路径还是绝对路径看你实际需要。

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

　　接着把下面的代码，插入到上面代码之后，来初始化 bgStretcher 插件，要告知插件在哪个元素上起作用，同时可以配置插件的选项。同样，注意代码中的图片路径不要出错。

01 <script type="text/javascript">
02     $(document).ready(function(){
03      
04         //  Initialize Backgound Stretcher    
05         $('.demoo').bgStretcher({
06             images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg'],
07             imageWidth: 800,
08             imageHeight: 400,
09             slideDirection: 'N',
10             slideShowSpeed: 1000,
11             transitionEffect: 'fade',
12             sequenceMode: 'normal',
13         });
14          
15     });
16 </script>
　　该插件不只是用于整个网页背景哦，还可以用于某个网页元素，当然，起码这个元素能设置背景，比如DIV之类等等。选择网页元素是通过ID或者Class来的，应为BODY这个元素名是网页里唯一的元素名，也就是给整个网页设置背景。如果是给页面某一个DIV块设置背景，那你需要给这个DIV定义一个ID或者知道它的样式Class名也行，ID和Class名最好是唯一的，要不然效果很惊人。
插件选项：

配置选项 缺 省 值 选项说明
imageContainer bgstretcher bgStretcher will automatically build structure for the images list in a DOM tree. This parameter is ID for the images holder. Try inspecting the tree with a FireBug to get an idea how it's constructed.
resizeProportionally true Indicates if background image(s) will be resized proportionally or not.
resizeAnimate false Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
images empty An array containing list of images to be displayed on page's background.
imageWidth 1024 Original image's width.
imageHeight 768 Original image's height.
maxWidth auto Maximum image's width.
maxHeight auto Maximum image's height.
nextSlideDelay 3000 (3 seconds) Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeed normal Numeric value in milliseconds or jQuery string value ('fast', 'normal', 'slow'). The parameter sets the speed of transition between images.
slideShow true Allows or disallows slideshow functionality.
transitionEffect fade Transition effect (use also: none, simpleSlide, superSlide).
slideDirection N Slide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE).
sequenceMode normal Sequence mode (use also: back, random)
buttonPrev empty Previous button CSS selector
buttonNext empty Next button CSS selector
pagination empty CSS selector for pagination
anchoring 'left top' Anchoring bgStrtcher area regarding window
anchoringImg 'left top' Anchoring images regarding window
preloadImg false For Preload images use true
stratElementIndex 0 Start element index
callbackfunction null Name of callback function

插件方法：

方法名称 方法说明
$(objID).bgStretcher.play() Resume background slideshow
$(objID).bgStretcher.pause() Pause background slideshow
$(objID).bgStretcher.sliderDestroy() Destroy background slideshow
浏览器兼容性：
MS Internet Explorer 6, 7, 8, 9
Mozilla Firefox 2, 3, 4
Opera 9+
Apple Safari
Google Chrome
原文在这里，俺稍微翻译了一下，演示效果俺自己调整了参数。 http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

jQuery plugin : bgStretcher 背景图片切换效果插件的更多相关文章

  1. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  2. 100种不同图片切换效果插件pageSwitch

    分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览   源码下载 实现的代码. ht ...

  3. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  4. jQuery自动与手动图片切换效果下载

    效果图: 查看效果:http://hovertree.com/jq/hovertreeimg/ 下载:http://hovertree.com/h/bjaf/gk8mko69.htm 使用代码: &l ...

  5. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  6. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  7. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  8. [Android实例] app引导页(背景图片切换加各个页面动画效果)（申明：来源于网络）

    [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络) 地址: http://www.eoeandroid.com/thread-918356-1-1.html h ...

  9. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

随机推荐

  1. 搞定C系语言的的swap

    http://www.cs.utsa.edu/~wagner/CS2213/swap/swap.html 原地址 Parameters, by value and by reference: Both ...

  2. python3的encode()和decode()

    python3的encode()和decode() 在python3的内存中. 在程序运行阶段. 使⽤用的是unicode编码. 因为unicode是万国码. 什么内容都可以进行显示. 那么在数据传输 ...

  3. python进阶02 特殊方法与特殊属性

    python进阶02 特殊方法与特殊属性 一.初始化.析构 1.初始化 # python中有很多双下划线开头且以下划线结尾的固定方法,它们会在特定的时机被触发执行,这便是特殊方法 # 在实例化的时候就 ...

  4. Python3.x下Selenium3.x之安装篇

    环境安装 Python环境: 首先我们需要安装Python语言,这个不过多详述,仅给出建议 Python2.x目前支持的第三方库类较多 Python3.x是修改了许多2.x版本的不足,但支持的库类较少 ...

  5. winform 程序隐藏窗口运行

    DWPublishForm frm = new DWPublishForm(); frm.IsAutoUpdate = true; frm.ShowInTaskbar = false; frm.For ...

  6. MySQL 查看表大小

    当遇到数据库占用空间很大的情况下,可以用以下语句查找大数据量的表 SELECT TABLE_NAME ,),) 'DATA_SIZE(M)' ,),) 'INDEX_SIZE(M)' ,AVG_ROW ...

  7. DataSource--DBCP--C3P0--DBUtils

    一.DataSource 接口(javax.sql)     1.连接池:         由于与数据库连接的创建和销毁非常占用资源,因此提出了连接池技术,用于提升java程序操作数据库的性能;连接池 ...

  8. C语言中的static和extern

    c语言中,全局变量是一个非常重要的概念.全局变量定义在函数外,可以被所有的函数共同使用. #include <iostream> ; void display() { printf(&qu ...

  9. 自定义标签jsp2格式

    在写自定义标签时候是不是感觉很烦啊,其实人家也是这样认为的,于是我们的jsp新的标准对标签进行了更改,使我们用起来更简单.到底哪里简单呢?看看代码再说咯: 还是老规矩,先上一个标签的逻辑类: 1. p ...

  10. 突然心血来潮，想写写我在java面试中遇到的事。作为一个应届生，我觉得我的情况都与大部分应届生是差不多的，希望你们能在这上面得到一些有用的

    面试过程吧,怎么说呢?从一开始接触面试到现在成功了几家,这中间我确实收获了许多,那我就从我第一次面试开始讲吧. 第一次面试是有人介绍过来的,总之还是有一位贵人相助,所以第一次面试时,面试官很好没有怎么 ...