腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

基于pbTouchSlider–jquery滑動響應(yīng)式幻燈片插件特效代碼

pbTouchSlider jquery滑動響應(yīng)式幻燈片

投訴報(bào)錯

腳本大小：778KB
腳本語言：簡體中文
腳本類型：國產(chǎn)軟件
腳本授權(quán)：免費(fèi)軟件
腳本類別：jQuery
應(yīng)用平臺：jquery
更新時(shí)間：2020-11-09
網(wǎng)友評分：

360通過騰訊通過金山通過

778KB

詳情介紹

pbTouchSlider 是一款基于 jquery 的滑動響應(yīng)式幻燈片插件，它除了一般幻燈片基本的如箭頭控制、圓點(diǎn)控制、縮略圖功能外，還支持響應(yīng)式設(shè)計(jì)和滑動控制，同時(shí) pbTouchSlider 還可以針對平板、手機(jī)設(shè)備分別設(shè)置高度，這使得 pbTouchSlider 能夠適應(yīng)各種設(shè)備。pbTouchSlider 還可以為每個(gè)幻燈片添加標(biāo)題和描述，自帶的樣式還可以讓標(biāo)題和描述以動畫的方式展示。

瀏覽器兼容

使用方法

1、引入文件

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/entypo.css">
<script src="js/jquery.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/slider.js"></script>

style.css 為插件樣式（有若干修改），entypo.css 為開源字體圖標(biāo)，主要使用了左右箭頭，hammer.min.js 用于實(shí)現(xiàn)滑動拖拽，slider.js 為 pbTouchSlider 插件核心代碼。

2、HTML

<div class="o-sliderContainer hasShadow" id="dowebokWrap">
    <div class="o-slider" id="dowebok">
        <div class="o-slider--item" data-image="images/5.jpg"></div>
        <div class="o-slider--item" data-image="images/6.jpg"></div>
        <div class="o-slider--item" data-image="images/1.jpg"></div>
        <div class="o-slider--item" data-image="images/2.jpg"></div>
        <div class="o-slider--item" data-image="images/3.jpg"></div>
        <div class="o-slider--item" data-image="images/4.jpg"></div>
    </div>
</div>

3、JavaScript

$(function() {
    $('#dowebok').pbTouchSlider({
        slider_Wrap: '#dowebokWrap'
    );
});

配置

屬性

GitHub 地址：https://github.com/pirolab/pirolab.github.io

jQuery幻燈片插件owlcarousel參數(shù)說明中文文檔

pbTouchSlider jquery jquery幻燈片插件 jquery滑動響應(yīng)式

下載地址

下載錯誤？【投訴報(bào)錯】