jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效

更新時(shí)間：2015年04月12日 10:41:51 投稿：hebedich

jQuery插件slick是一款響應(yīng)式、適用于移動(dòng)設(shè)備觸摸屏、可滑動(dòng)顯示的jQuery幻燈片插件。該幻燈片插件可以設(shè)置多種顯示效果，可以自動(dòng)播放，是一款移動(dòng)優(yōu)先的jQuery幻燈片插件。

jQuery響應(yīng)式手機(jī)端移動(dòng)端幻燈片圖片切換特效插件slick，基于jQuery，功能非常強(qiáng)大，支持左右按鈕切換、支持圓點(diǎn)切換、支持自定義切換數(shù)量，支持自定義切換速度、支持圖片預(yù)加載、支持自動(dòng)播放定義，效果非常的不錯(cuò)，眾多的參數(shù)自定義支持，覺得可以的可以參考他們的參數(shù)配置，還是值得學(xué)習(xí)使用的。

使用方法：

1.加載插件和jQuery

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript" src="slick/slick.js"></script> 
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

2.HTML內(nèi)容

<div class="slider fade"> 
<div><div class="image"><img src="img/fonz1.png"/></div></div> 
<div><div class="image"><img src="img/fonz2.png"/></div></div> 
<div><div class="image"><img src="img/fonz3.png"/></div></div> 
</div>

3.函數(shù)調(diào)用

<script type="text/javascript"> 
$(document).ready(function() { 
  $('.fade').slick({ 
    dots: true, 
    infinite: true, 
    speed: 500, 
    fade: true, 
    slide: 'div', 
    cssEase: 'linear' 
  }); 
}); 
</script>

查看DEMO 立即下載

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

基于jQuery的ajax方法封裝
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。這篇文章主要介紹了基于jQuery的ajax方法封裝的相關(guān)資料,需要的朋友可以參考下
2016-07-07
jQuery如何將選中的對(duì)象轉(zhuǎn)化為原始的DOM對(duì)象
在一個(gè)頁面上選擇元素返回的集合是jQuery對(duì)象而不是原始的DOM對(duì)象，那么如何將其轉(zhuǎn)為DOM對(duì)象呢？下面有個(gè)不錯(cuò)的方法，大家可以嘗試操作下
2014-06-06
jQuery中可見性過濾器簡(jiǎn)單用法示例
這篇文章主要介紹了jQuery中可見性過濾器簡(jiǎn)單用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery中可見性過濾器的原理及相關(guān)使用技巧,需要的朋友可以參考下
2018-03-03
基于MVC+EasyUI的web開發(fā)框架之使用云打印控件C-Lodop打印頁面或套打報(bào)關(guān)運(yùn)單信息
這篇文章主要介紹了基于MVC+EasyUI的web開發(fā)框架之使用云打印控件C-Lodop打印頁面或套打報(bào)關(guān)運(yùn)單信息的相關(guān)資料,非常不錯(cuò)，需要的朋友可以參考下
2016-08-08
jquery插件star-rating.js實(shí)現(xiàn)星級(jí)評(píng)分特效
Bootstrap Star Rating是一個(gè)簡(jiǎn)單而強(qiáng)大的jQuery插件實(shí)現(xiàn)星級(jí)分?jǐn)?shù)評(píng)級(jí)。支持像分?jǐn)?shù)星填充和RTL輸入先進(jìn)的功能。在利用純CSS-3造型使控制重點(diǎn)開發(fā)。該插件使用引導(dǎo)標(biāo)記和造型默認(rèn)情況下，但它可以覆蓋與其他任何CSS的標(biāo)記。
2015-04-04
jQuery中ajax錯(cuò)誤調(diào)試分析
jQuery中把a(bǔ)jax封裝得非常好。但是日常開發(fā)中，我偶爾還是會(huì)遇到ajax報(bào)錯(cuò)。本文進(jìn)行簡(jiǎn)單分析一下ajax報(bào)錯(cuò)。需要的朋友可以參考下
2016-12-12
jQuery實(shí)現(xiàn)的tab標(biāo)簽切換效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的tab標(biāo)簽切換效果,結(jié)合實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下
2016-09-09
基于jQuery Tipso插件實(shí)現(xiàn)消息提示框特效
這篇文章主要介紹了基于jQuery Tipso插件實(shí)現(xiàn)消息提示框特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
jQuery切換所有復(fù)選框選中狀態(tài)的方法
這篇文章主要介紹了jQuery切換所有復(fù)選框選中狀態(tài)的方法,可實(shí)現(xiàn)批量切換復(fù)選框選中狀態(tài)的功能,需要的朋友可以參考下
2015-07-07
jQuery 擴(kuò)展對(duì)input的一些操作方法
擴(kuò)展對(duì)input的一些方法(練習(xí)jQuery插件)
2009-10-10