酷炫jQuery全屏3D焦點圖動畫效果，酷炫jquery

酷炫jQuery全屏3D焦點圖動畫效果，酷炫jquery

這又是一款很不錯的jQuery焦點圖動畫，它的特點是整個焦點圖基本是全螢幕顯示的，非常大氣，而且圖片的傾斜也給整個焦點圖3D立體的視覺效果，而且焦點圖的圖片切換非常流暢，相當實用。

HTML代碼：

<div class="wrapper"></div><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>

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;  //the main slider  var $pxs_slider = $('.pxs_slider',$pxs_container),  //the elements in the slider  $elems  = $pxs_slider.children(),  //total number of elements  total_elems = $elems.length,  //the navigation buttons  $pxs_next = $('.pxs_next',$pxs_container),  $pxs_prev = $('.pxs_prev',$pxs_container),  //the bg images  $pxs_bg1 = $('.pxs_bg1',$pxs_container),  $pxs_bg2 = $('.pxs_bg2',$pxs_container),  $pxs_bg3 = $('.pxs_bg3',$pxs_container),  //current image  current  = 0,  //the thumbs container  $pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),  //the thumbs  $thumbs  = $pxs_thumbnails.children(),  //the interval for the autoplay mode  slideshow,  //the loading image  $pxs_loading = $('.pxs_loading',$pxs_container),  $pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);  //first preload all the images  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();   //one images width (assuming all images have the same sizes)   var one_image_w = $pxs_slider.find('img:first').width();   /*   need to set width of the slider,   of each one of its elements, and of the   navigation buttons    */   setWidths($pxs_slider,   $elems,   total_elems,   $pxs_bg1,   $pxs_bg2,   $pxs_bg3,   one_image_w,   $pxs_next,   $pxs_prev);   /*    set the width of the thumbs    and spread them evenly    */   $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)'    });    }    //hovering the thumbs animates them up and down    $this.bind('mouseenter',function(){    $(this).stop().animate({top:'-10px'},100);    }).bind('mouseleave',function(){    $(this).stop().animate({top:'0px'},100);    });   });   //make the first thumb be selected   highlight($thumbs.eq(0));   //slide when clicking the navigation buttons   $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);   });   /*   clicking a thumb will slide to the respective image    */   $thumbs.bind('click',function(){    var $thumb = $(this);    highlight($thumb);    //if autoplay interrupt when user clicks    if(o.auto)    clearInterval(slideshow);    current = $thumb.index();    slide(current,    $pxs_slider,    $pxs_bg3,    $pxs_bg2,    $pxs_bg1,    o.speed,    o.easing,    o.easingBg);   });   /*   activate the autoplay mode if   that option was specified    */   if(o.auto != 0){    o.circular = true;    slideshow = setInterval(function(){    $pxs_next.trigger('click');    },o.auto);   }   /*   when resizing the window,   we need to recalculate the widths of the   slider elements, based on the new windows width.   we need to slide again to the current one,   since the left of the slider is no longer correct    */   $(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'));  }); }); }; //the current windows width 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){ /* the width of the slider is the windows width times the total number of elements in the slider  */ var pxs_slider_w = w_w * total_elems; $pxs_slider.width(pxs_slider_w + 'px'); //each element will have a width = windows width $elems.width(w_w + 'px'); /* we also set the width of each bg image div. The value is the same calculated for the 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);

調用外掛程式的JavaScript代碼

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

以上就是本文的全部內容，希望對大家學習jquery程式設計有所協助。

您可能感興趣的文章:

• 基於jquery1.4.2的仿flash超炫焦點圖播放效果
• Jquery 焦點圖 用於圖片展示效果代碼
• 基於JQuery的實現圖片輪播效果(焦點圖)
• jquery實現的帶縮圖的焦點圖片切換(自動播放/響應滑鼠動作)
• jquery焦點圖片切換(數字標註/手動/自動播放/橫向滾動)
• jquery仿QQ商城帶左右按鈕控制焦點圖片切換滾動效果
• 基於jquery的網站投影片轉場效果焦點圖代碼
• jquery左右滾動焦點圖banner圖片滑鼠經過顯示上下頁按鈕
• jQuery焦點圖切換簡易外掛程式製作過程全紀錄
• Jquery焦點圖執行個體代碼