首页 > 特效插件 > 滚动轮播 >  Parallax Slider视差背景图片切换效果正文

Parallax Slider视差背景图片切换效果

特效介绍

视差滚动
Parallax Slider

        Parallax Slider是基于jQuery的背景带视差效果的图片滚动插件,由于背景的视差效果,图片滚动起来有种立体感,效果很不错。其实,视差就是将多张图片错位。目前被广泛应用于互联网上。

使用方法
1、引入css文件:
<link rel="stylesheet" type="text/css" href="css/style.css" />
2、加入html代码:
<div id="pxs_container" class="pxs_container">
	<div class="pxs_bg">
		<div class="pxs_bg1"></div>
		<div class="pxs_bg2"></div>
		<div class="pxs_bg3"></div>
	</div>
	<div class="pxs_loading">Loading images...</div>
	<div class="pxs_slider_wrapper">
		<ul class="pxs_slider">
			<li><img src="images/1.jpg" alt="First Image" /></li>
			<li><img src="images/2.jpg" alt="Second Image" /></li>
			<li><img src="images/3.jpg" alt="Third Image" /></li>
			<li><img src="images/4.jpg" alt="Forth Image" /></li>
			<li><img src="images/5.jpg" alt="Fifth Image" /></li>
			<li><img src="images/6.jpg" alt="Sixth Image" /></li>
		</ul>
		<div class="pxs_navigation">
			<span class="pxs_next"></span>
			<span class="pxs_prev"></span>
		</div>
		<ul class="pxs_thumbnails">
			<li><img src="images/thumbs/1.jpg" alt="第一张" /></li>
			<li><img src="images/thumbs/2.jpg" alt="第二张" /></li>
			<li><img src="images/thumbs/3.jpg" alt="第三张" /></li>
			<li><img src="images/thumbs/4.jpg" alt="第四张" /></li>
			<li><img src="images/thumbs/5.jpg" alt="第五张" /></li>
			<li><img src="images/thumbs/6.jpg" alt="html静态网页模板" /></li>
		</ul>
	</div>
</div>

class为“pxs_slider”的ul里面的图片是大图,class为“pxs_thumbnails”的ul里面的图片是缩略图。


3、引入jquery和jquery.easing.1.3.js(本动画使用了easing扩展效果)

<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
4、下面是本插件的核心代码,放在刚才引入的jquery两个文件的下面,或者单独放在一个js中引入也可以:
(function($) {
	$.fn.parallaxSlider = function(options) {
		var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
		return this.each(function() {
			var $pxs_container 	= $(this),
			o 				= $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
			
			//滚动主体
			var $pxs_slider		= $('.pxs_slider',$pxs_container),
			//滚动内容
			$elems			= $pxs_slider.children(),
			//滚动的数量
			total_elems		= $elems.length,
			//上一页下一页按钮
			$pxs_next		= $('.pxs_next',$pxs_container),
			$pxs_prev		= $('.pxs_prev',$pxs_container),
			//大图
			$pxs_bg1		= $('.pxs_bg1',$pxs_container),
			$pxs_bg2		= $('.pxs_bg2',$pxs_container),
			$pxs_bg3		= $('.pxs_bg3',$pxs_container),
			//当前位置
			current			= 0,
			//缩略图外面的容器
			$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
			//缩略图
			$thumbs			= $pxs_thumbnails.children(),
			//自动滚动时间
			slideshow,
			//加载图片
			$pxs_loading	= $('.pxs_loading',$pxs_container),
			$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
			//预加载图片
			var loaded		= 0,
			$images		= $pxs_slider_wrapper.find('img');
			$images.each(function(){
				var $img	= $(this);
				$('<img/>').load(function(){
					++loaded;
					if(loaded	== total_elems*2){
						$pxs_loading.hide();
						$pxs_slider_wrapper.show();
						//一个图像的宽度(假设所有的图像具有相同的大小)
						var one_image_w		= $pxs_slider.find('img:first').width();
						/*
						需要设置滑块的宽度,它的每一个元素,以及导航按钮
						 */
						setWidths($pxs_slider,
						$elems,
						total_elems,
						$pxs_bg1,
						$pxs_bg2,
						$pxs_bg3,
						one_image_w,
						$pxs_next,
						$pxs_prev);
				
						/*
							设置缩略图的宽度,并均匀分布
						 */
						$pxs_thumbnails.css({
							'width'			: one_image_w + 'px',
							'margin-left' 	: -one_image_w/2 + 'px'
						});
						var spaces	= one_image_w/(total_elems+1);
						$thumbs.each(function(i){
							var $this 	= $(this);
							var left	= spaces*(i+1) - $this.width()/2;
							$this.css('left',left+'px');
								
							if(o.thumbRotation){
								var angle 	= Math.floor(Math.random()*41)-20;
								$this.css({
									'-moz-transform'	: 'rotate('+ angle +'deg)',
									'-webkit-transform'	: 'rotate('+ angle +'deg)',
									'transform'			: 'rotate('+ angle +'deg)'
								});
							}
							//鼠标移动到缩略图上面的动画效果
							$this.bind('mouseenter',function(){
								$(this).stop().animate({top:'-10px'},100);
							}).bind('mouseleave',function(){
								$(this).stop().animate({top:'0px'},100);
							});
						});
						//默认选中第一个缩略图
						highlight($thumbs.eq(0));
						//点击上一页下一页按钮,开始滚动
						$pxs_next.bind('click',function(){
							++current;
							if(current >= total_elems)
								if(o.circular)
									current = 0;
							else{
								--current;
								return false;
							}
							highlight($thumbs.eq(current));
							slide(current,
							$pxs_slider,
							$pxs_bg3,
							$pxs_bg2,
							$pxs_bg1,
							o.speed,
							o.easing,
							o.easingBg);
						});
						$pxs_prev.bind('click',function(){
							--current;
							if(current < 0)
								if(o.circular)
									current = total_elems - 1;
							else{
								++current;
								return false;
							}
							highlight($thumbs.eq(current));
							slide(current,
							$pxs_slider,
							$pxs_bg3,
							$pxs_bg2,
							$pxs_bg1,
							o.speed,
							o.easing,
							o.easingBg);
						});
						/*
						点击缩略图,滚动到对应的大图上
						 */
						$thumbs.bind('click',function(){
							var $thumb	= $(this);
							highlight($thumb);
							//如果用户点击自动滚动中断
							if(o.auto)
								clearInterval(slideshow);
							current 	= $thumb.index();
							slide(current,
							$pxs_slider,
							$pxs_bg3,
							$pxs_bg2,
							$pxs_bg1,
							o.speed,
							o.easing,
							o.easingBg);
						});
						/*
						如果指定了该选项激活自动播放模式
						 */
						if(o.auto != 0){
							o.circular	= true;
							slideshow	= setInterval(function(){
								$pxs_next.trigger('click');
							},o.auto);
						}
				
						/*
							当调整窗口大小,
							我们需要重新计算的宽度
							滑块元素,基于新的窗口宽度。
							我们需要再次向当前的一个,
							由于滑块的左侧是不正确的
						 */
						$(window).resize(function(){
							w_w	= $(window).width();
							setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
							slide(current,
							$pxs_slider,
							$pxs_bg3,
							$pxs_bg2,
							$pxs_bg1,
							1,
							o.easing,
							o.easingBg);
						});

					}
				}).error(function(){
					alert('here')
				}).attr('src',$img.attr('src'));
			});
				
		});
	};
	
	//当前窗口宽度
	var w_w				= $(window).width();
	
	var slide			= function(current,
	$pxs_slider,
	$pxs_bg3,
	$pxs_bg2,
	$pxs_bg1,
	speed,
	easing,
	easingBg){
		var slide_to	= parseInt(-w_w * current);
		$pxs_slider.stop().animate({
			left	: slide_to + 'px'
		},speed, easing);
		$pxs_bg3.stop().animate({
			left	: slide_to/2 + 'px'
		},speed, easingBg);
		$pxs_bg2.stop().animate({
			left	: slide_to/4 + 'px'
		},speed, easingBg);
		$pxs_bg1.stop().animate({
			left	: slide_to/8 + 'px'
		},speed, easingBg);
	}
	
	var highlight		= function($elem){
		$elem.siblings().removeClass('selected');
		$elem.addClass('selected');
	}
	
	var setWidths		= function($pxs_slider,
	$elems,
	total_elems,
	$pxs_bg1,
	$pxs_bg2,
	$pxs_bg3,
	one_image_w,
	$pxs_next,
	$pxs_prev){
		/*
			滑块的宽度是窗口宽度
			次数在滑块中的元素总数
		 */
		var pxs_slider_w	= w_w * total_elems;
		$pxs_slider.width(pxs_slider_w + 'px');
		//大图背景的宽度=窗口宽度
		$elems.width(w_w + 'px');
		/*
		我们需要设置每个大图背景的宽度,和pxs_slider宽度相同
		 */
		$pxs_bg1.width(pxs_slider_w + 'px');
		$pxs_bg2.width(pxs_slider_w + 'px');
		$pxs_bg3.width(pxs_slider_w + 'px');
		/*
		both the right and left of the
		navigation next and previous buttons will be:
		windowWidth/2 - imgWidth/2 + some margin (not to touch the image borders)
		 */
		var position_nav	= w_w/2 - one_image_w/2 + 3;
		$pxs_next.css('right', position_nav + 'px');
		$pxs_prev.css('left', position_nav + 'px');
	}
	
	$.fn.parallaxSlider.defaults = {
		auto			: 0,	//how many seconds to periodically slide the content.
								//If set to 0 then autoplay is turned off.
		speed			: 1000,//speed of each slide animation
		easing			: 'jswing',//easing effect for the slide animation
		easingBg		: 'jswing',//easing effect for the background animation
		circular		: true,//circular slider
		thumbRotation	: true//the thumbs will be randomly rotated
	};
	//easeInOutExpo,easeInBack
})(jQuery);
具体的参数说明,都已经写的很详细


6、最后是调用这个插件:

$(function() {
	var $pxs_container	= $('#pxs_container');
	$pxs_container.parallaxSlider();
});