利用CSS固定背景交替實現視差滾動效果
阿新 • • 發佈：2019-02-15
<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="First Image" /></li>
<li><img src="images/thumbs/2.jpg" alt="Second Image" /></li>
<li><img src="images/thumbs/3.jpg" alt="Third Image" /></li>
<li><img src="images/thumbs/4.jpg" alt="Forth Image" /></li>
<li><img src="images/thumbs/5.jpg" alt="Fifth Image" /></li>
<li><img src="images/thumbs/6.jpg" alt="Sixth Image" /></li>
</ul>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
(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);
});
<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="First Image" /></li>
<li><img src="images/thumbs/2.jpg" alt="Second Image" /></li>
<li><img src="images/thumbs/3.jpg" alt="Third Image" /></li>
<li><img src="images/thumbs/4.jpg" alt="Forth Image" /></li>
<li><img src="images/thumbs/5.jpg" alt="Fifth Image" /></li>
<li><img src="images/thumbs/6.jpg" alt="Sixth Image" /></li>
</ul>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
(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);
});