jQuery插件Elastislide實(shí)現(xiàn)響應(yīng)式的焦點(diǎn)圖無(wú)縫滾動(dòng)切換特效
更新時(shí)間：2015年04月12日 16:36:21 投稿：hebedich
這篇文章主要介紹了jQuery插件Elastislide實(shí)現(xiàn)響應(yīng)式的焦點(diǎn)圖無(wú)縫滾動(dòng)切換特效,效果非常的棒，而且兼容性也很好，推薦給小伙伴們
支持響應(yīng)式的jQuery焦點(diǎn)圖片無(wú)縫滾動(dòng)切換特效插件Elastislide，非常漂亮的圖片輪播特效插件，支持左右輪播圖片、上下輪播圖片、自適應(yīng)移動(dòng)端顯示，支持眾多的參數(shù)配置：orientation :'horizontal'(水平切換),speed : 500(切換速度,單位毫秒),easing : 'ease-in-out'(動(dòng)畫(huà)效果), minItems : 3(默認(rèn)展示的數(shù)量)等,瀏覽器兼容方面：IE8+、以及較現(xiàn)代瀏覽器，不介意低版本瀏覽器的可以使用，當(dāng)然也可以使用到移動(dòng)端觸屏。
支持響應(yīng)式的jQuery焦點(diǎn)圖片無(wú)縫滾動(dòng)切換特效插件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>
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法
- jQuery圖片輪播滾動(dòng)切換代碼分享
- jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼
- jQuery實(shí)現(xiàn)的圖文高亮滾動(dòng)切換特效實(shí)例
- jQuery插件multiScroll實(shí)現(xiàn)全屏鼠標(biāo)滾動(dòng)切換頁(yè)面特效
- jQuery bxCarousel實(shí)現(xiàn)圖片滾動(dòng)切換效果示例代碼
- 基于Jquery實(shí)現(xiàn)的一個(gè)圖片滾動(dòng)切換
- 簡(jiǎn)短幾句jquery代碼的實(shí)現(xiàn)一個(gè)圖片向上滾動(dòng)切換
- jquery 圓形旋轉(zhuǎn)圖片滾動(dòng)切換效果
- 基于jQuery實(shí)現(xiàn)滾動(dòng)切換效果
相關(guān)文章
在Discuz! 6.1中無(wú)法直接使用jQuery，此時(shí)對(duì)/include/javascript/common.js文件應(yīng)用如下補(bǔ)丁即可。2008-09-09
jQuery EasyUI API 中文幫助文檔和擴(kuò)展實(shí)例
這篇文章主要介紹了jQuery EasyUI API 中文幫助文檔和擴(kuò)展實(shí)例 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
Jquery attr("checked") 返回checked或undefined 獲取選中失效
$('#cb').attr('checked'); 返回的是checked或者是undefined，不是原來(lái)的true和false了，有關(guān)此問(wèn)題的解決方法如下，感興趣的朋友可以參考下2013-10-10
gridster.js是一款基于jquery的前端拖拽插件，效果相當(dāng)?shù)牟诲e(cuò)，大家可以先看看Demo(http://gridster.net/#intro)（藍(lán)色部分的白塊就是了，可以隨便拖動(dòng)，娛樂(lè)性很強(qiáng)）。2015-04-04
jQuery 動(dòng)畫(huà)與停止動(dòng)畫(huà)效果實(shí)例詳解
這篇文章主要介紹了jQuery 動(dòng)畫(huà)與停止動(dòng)畫(huà)效果,結(jié)合實(shí)例形式詳細(xì)分析了jQuery 動(dòng)畫(huà)與停止動(dòng)畫(huà)效果相關(guān)函數(shù)功能、用法及使用注意事項(xiàng),需要的朋友可以參考下2020-05-05
這篇文章主要介紹了jQuery的$.extend 淺拷貝與深拷貝的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了利用jQuery異步上傳文件的插件用法詳解,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了jQuery如何實(shí)現(xiàn)模糊搜索，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
文本有關(guān)的樣式和jQuery求對(duì)象的高寬問(wèn)題分別說(shuō)明
有關(guān)文處理本有關(guān)的問(wèn)題WEB開(kāi)發(fā)經(jīng)常會(huì)用到，這里結(jié)合使用情況總結(jié)一下，同時(shí)還有jQuery求對(duì)象的高度問(wèn)題，下面為大家本別講解下2013-08-08
jquery根據(jù)一個(gè)值來(lái)選中select下的option實(shí)例代碼
下面小編就為大家?guī)?lái)一篇jquery根據(jù)一個(gè)值來(lái)選中select下的option實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08