您好,登錄后才能下訂單哦!
如何理解基于jQuery 的幻燈片插件Slick js,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
由于工作要將圖片做成幻燈片樣式,于是想到了JQuery插件slick,上網查了一下,一些效果用法實例特意在此記錄下:slick是一個基于jQuery的幻燈片插件.
Slick.js特點:
支持響應式
瀏覽器支持css3時,則使用css3過度/動畫
支持移動設備滑動
支持桌面瀏覽器鼠標拖動
支持循環
支持左右控制
支持動態添加、刪除、過濾
支持自動播放、圓點、箭頭、回調等等
Slick.js單個顯示
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<title>jQuery幻燈片插件slick演示</title>
<linkrel="stylesheet"href="style/slick.css">
<style>
*{margin:0;padding:0;}
.slick{width:600px;margin:0auto;}
.slick-prev:before,.slick-next:before{position:absolute;left:0;top:1px;color:#ccc;}
.slick-prev{left:-35px;}
.slick-next{right:-35px;}
.slick-dots{bottom:-35px;}
</style>
</head>
<body>
<h2>jQuery幻燈片插件slick演示-單個顯示</h2>
<divclass="slick">
<div><imgsrc="images/1.jpg"alt=""></a></div>
<div><imgsrc="images/2.jpg"alt=""></div>
<div><imgsrc="images/3.jpg"alt=""></div>
<div><imgsrc="images/4.jpg"alt=""></div>
<div><imgsrc="images/5.jpg"alt=""></div>
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。