jQuery插件Elastislide實現(xiàn)響應式的焦點圖無縫滾動切換特效
支持響應式的jQuery焦點圖片無縫滾動切換特效插件Elastislide,非常漂亮的圖片輪播特效插件,支持左右輪播圖片、上下輪播圖片、自適應移動端顯示,支持眾多的參數(shù)配置:orientation :'horizontal'(水平切換),speed : 500(切換速度,單位毫秒),easing : 'ease-in-out'(動畫效果), minItems : 3(默認展示的數(shù)量)等,瀏覽器兼容方面:IE8+、以及較現(xiàn)代瀏覽器,不介意低版本瀏覽器的可以使用,當然也可以使用到移動端觸屏。

支持響應式的jQuery焦點圖片無縫滾動切換特效插件Elastislide
使用方法:
1.加載jQuery和插件
<script type="text/javascript" src="libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquerypp.custom.js"></script> <script type="text/javascript" src="js/jquery.elastislide.js"></script> <link rel="stylesheet" type="text/css" href="css/elastislide.css" />
2.HTML內(nèi)容
<ul id="carousel" class="elastislide-list"> <li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li> <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li> <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li> <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li> <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li> <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li> </ul>
3.函數(shù)調(diào)用
<script type="text/javascript">
$(document).ready(function() {
$( '#carousel' ).elastislide();
});
</script>
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關文章
jQuery實現(xiàn)列表內(nèi)容的動態(tài)載入特效
這里給大家分享的是使用jQuery實現(xiàn)列表內(nèi)容的動態(tài)載入的特效,效果相當棒,后面附上瀑布流的實現(xiàn)思路和關鍵代碼,有需要的小伙伴可以參考下。2015-08-08
鋒利的jQuery 要點歸納(三) jQuery中的事件和動畫(下:動畫篇)
《鋒利的jQuery》要點歸納(三) jQuery中的事件和動畫(下:動畫篇)2010-03-03
jquery怎樣實現(xiàn)ajax聯(lián)動框(一)
ajax聯(lián)動框想必大家早有所耳聞,接下來本文詳細介紹下使用jquery實現(xiàn)的原理及代碼,感興趣的你可以參考下,或許對你有所幫助2013-03-03
jquery插件unobtrusive實現(xiàn)片段式加載
本文給大家分享的是使用jquery插件unobtrusive實現(xiàn)片段式加載,效果非常不錯,有需要的小伙伴可以參考下。2015-06-06

