一款基於jQuery的圖片下滑切換焦點圖外掛程式

標籤：style   blog   http   io   ar   color   os   sp   java   

之前為大家分享了好多款jquery外掛程式，今天我們要分享的一款jQuery外掛程式也比較實用，是一款jQuery焦點圖外掛程式。焦點圖相當普通，一共可以迴圈播放4張圖片，並且每一張圖片在切換的時候都是向下滑動的轉場效果，並且在向下切換時產生彈性的動畫特效，另外，外掛程式是基於jQuery的，各種瀏覽器的相容性應該還不錯。

線上預覽   源碼下載

下面是實現這款jQuery焦點圖的過程和代碼。

HTML代碼：

<div class="slider-wrap col-width">    <div class="cycleslider-wrap" style="display: block;">       <div id="slider" class="cycleslider" style="position: relative; width: 970px; height: 350px;">             <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="./images/1.jpg" width="970" height="350" alt="用最少的程式碼完成對多的事情"></a></div>             <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="images/2.jpg" width="970" height="350" alt="為客戶創造價值就是我們存在的價值"></a></div>              <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="./images/1.jpg" width="970" height="350" alt="用最少的程式碼完成對多的事情"></a></div>             <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="images/2.jpg" width="970" height="350" alt="為客戶創造價值就是我們存在的價值"></a></div>        </div>        <a id="cycle-prev" href="#" style="opacity: 0; left: -50px;">Prev</a>        <a id="cycle-next" href="#" style="opacity: 0; right: -50px;">Next</a>        <div id="cycle-nav">        </div>    </div>    <div class="loader" style="display: none;"></div></div>

HTML代碼比較簡單，其中有一個圖片載入動畫，初始化時在頁面中隱藏，等待載入焦點圖圖片時將會出現Loading動畫。

jQuery代碼：

首先是引用了jQuery指令碼庫和slider的相應指令碼庫

<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.slider.pack.js"></script><script type="text/javascript" src="js/jquery.easing.js"></script>

然後就是渲染的初始化jQuery代碼：

jQuery(function() {jQuery(‘#cycle-prev, #cycle-next‘).css({opacity: ‘0‘});jQuery(‘.cycleslider-wrap‘).hover(function(){jQuery(‘#cycle-prev‘,this).stop().animate({left: ‘-31‘, opacity: ‘1‘},200,‘easeOutCubic‘);jQuery(‘#cycle-next‘,this).stop().animate({right: ‘-31‘, opacity: ‘1‘},200,‘easeOutCubic‘);}, function() {jQuery(‘#cycle-prev‘,this).stop().animate({left: ‘-50‘, opacity: ‘0‘},400,‘easeInCubic‘);jQuery(‘#cycle-next‘,this).stop().animate({right: ‘-50‘, opacity: ‘0‘},400,‘easeInCubic‘);});jQuery(".cycleslider-wrap").fadeIn(1000);jQuery(".slider-wrap .loader").css({display: "none"});jQuery("#slider").cycle({fx:  "scrollDown",speed:  "800",timeout: "1000",easing:  "easeOutBounce",next:  "#cycle-next",prev:  "#cycle-prev",pager:  "#cycle-nav"});});

 via:http://www.w2bc.com/Article/12518

一款基於jQuery的圖片下滑切換焦點圖外掛程式