DD Full Screen Slider 是一款基于 jQuery 和 jquery.mousewheel.js 的全屏滾動插件,正因為基于前面兩個文件,所以它比較小,不壓縮也不到 10KB。DD Full Screen Slider 有一下特點:
支持桌面和移動設(shè)備
多種方式切換:鼠標(biāo)滾輪、鼠標(biāo)拖拽、圓點導(dǎo)航、鍵盤方向鍵
支持錨點/哈希
在不支持 CSS3 動畫的瀏覽器中自動回滾使用 jQuery 動畫
支持多種瀏覽器,包括 IE8(部分)
使用方法
1、引入文件
<link rel="stylesheet" href="css/ddfullscreenslider.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery.mousewheel.min.js"></script> <script src="js/ddfullscreenslider.js"></script>
2、HTML
<section id="dowebok" class="dd_fullscreenslider"> <div class="slidewrapper"> <article class="slide">第一屏</article> <article class="slide">第二屏</article> <article class="slide">第三屏</article> <article class="slide">第四屏</article> <article class="slide">第五屏</article> </div> </section>
3、JavaScript
var fss; $(function() { fss = new ddfullscreenslider({ sliderid: 'dowebok' }); });
配置
jQuery全屏滾動插件DD Full Screen Slider演示.rar
屬性/方法
類型
默認(rèn)值
說明
sliderid(必須)
字符串
空
綁定ID
addHash
布爾值
true
使用錨鏈接
transitionDuration
數(shù)字
0.5
動畫持續(xù)時間,以秒為單位
keycodeNavigation
數(shù)組
[40, 38]
鍵盤控制的按鍵值
swipeconfig
對象
{peekamount: 100, mousedrag: true}
針對觸摸設(shè)備的配置
onslide
函數(shù)
空
回調(diào)函數(shù)
建站咨詢熱線
029-33273980