特效介绍
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="https://5.jimth.com/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();
});