jQuery plugin : bgStretcher 背景图片切换效果插件

[ 作者:笑傲江湖 发布于:2012年-4月-24日 11:39 星期二  分类:百 宝 箱 ]

  bgStretcher 2011 (Background Stretcher)是一个jQuery的插件,可以为你的网页添加多张背景图,且多个背景图能够自动切换,同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下。图片切换顺序也可以设置正向,反向或者随机。更多选项就看你自己慢慢研究了。
插件特点:
  脚本文件简洁,设置简单;支持所有新版浏览器;支持单张或者多张图片。
插件使用:
  首先,你当然要把插件先下载再说,插件包里已经包含了所需要的JS文件。
  然后,把下面的代码插入到你网页的<head>和</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>
  接着把下面的代码,插入到上面代码之后,来初始化 bgStretcher 插件,要告知插件在哪个元素上起作用,同时可以配置插件的选项。同样,注意代码中的图片路径不要出错。
<script type="text/javascript">
	$(document).ready(function(){
	
        //  Initialize Backgound Stretcher	   
		$('.demoo').bgStretcher({
			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'],
			imageWidth: 800, 
			imageHeight: 400, 
			slideDirection: 'N',
			slideShowSpeed: 1000,
			transitionEffect: 'fade',
			sequenceMode: 'normal',
		});
		
	});
</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_bgstretcher-2.rar
212.56KB

标签: jQuery bgStretcher 背景图切换

评论16 引用0 浏览23199

信息列表:

楼主

熙儿
2015-01-15 10:45
你好,我的背景图片不显示,是因为路径吗?但是路径是对的啊,难道html中js代码中的图片路径和html本地路径是不一样的吗?
笑傲江湖
2015-01-15 11:46
@熙儿:js和html里的路径都是一样的,也分相对路径和绝对路径,你自己要搞清楚,不显示,可能是文件名不对,或者就是路径不对,或者是图片文件格式问题,请在仔细检查核对一下吧。

楼主

zero
2013-10-24 21:35
请问可以换成缩略图控制切换吗?
笑傲江湖
2013-10-24 22:53
@zero:应该是不行。

楼主

keleonly
2013-07-23 17:29
你好,背景图应该可以做到切换了,也增加了按钮快速切换。
但现在需要配上背景图的说明,比如作品来自谁的。你能帮我做一个例子吗?

你说用其他的js来做文字切换,但自动是可以自到,但如果用户按了按钮,那只有背景图切换,文字说明不会跟着换,所以图和文字就不同步了。

你是高手,能帮我做个例子吗?

背景图片和按钮的例子:http://www.ruc.edu.cn/    http://www.lofter.com
你能配上文字也和图片同步吗?
笑傲江湖
2013-07-24 00:54
@keleonly:俺也不会写JS啊,仅限于使用别人写好的。你的需求用这种插件不行吗?
试试看这个:
http://iprodev.com/2012/07/iview/
演示:
http://iprodev.com/iview/

楼主

zwbtfy
2013-06-28 10:00
这个传到服务器上ie浏览器没法用,在本地可以
笑傲江湖
2013-06-28 10:11
@zwbtfy:那不应该啊,是不是js文件或者图片文件路径有啥问题。

楼主

oleou
2013-05-29 11:14
额 知道了   修改 bgstretcher.js中的  nextSlideDelay    3000 (3 seconds)

楼主

oleou
2013-05-29 11:03
哈哈 ,又来了。  

问一下 ,背景图片展示的时候 怎么能延长一点 ,然后在切换?  谢谢

楼主

小罗
2013-03-20 00:19
可不可以随着背景的变动,字体也跟着变动。
笑傲江湖
2013-03-20 00:38
@小罗:那你的自己另外在写一段相应的jQuery代码来控制说明文字也跟着一起变动。或者一个土办法,把相应的说明文字做到图片里去,更简单直接。
小罗
2013-03-20 16:07
@笑傲江湖:我倒是想自己搞一下,可是我不是搞前端的,看到js就已经懵了。最起码得精通css。这个插件不错如果能每切换一个背景相对应的内容也切换就好了。我一直再找这种插件。
笑傲江湖
2013-03-20 16:40
@小罗:你说的这种也有啊,试试看这个:
http://iprodev.com/2012/07/iview/
演示:
http://iprodev.com/iview/
小罗
2013-03-21 21:42
@笑傲江湖:这个网站鼠标移动指示的那个箭头好炫。非常感谢之,自己写了一个最简易的哈。
笑傲江湖
2013-03-21 23:45
@小罗:能用上就好。
说点什么:

正文内容:

 




图片博文
http://www.cssbuttongenerator.com/