設為首頁收藏本站

開啟輔助訪問切換到寬版

TShopping»討論區 › 電腦3C › 網頁設計 › PHP開發 › jQuery 輪播式廣告插件 flexslider 使用指南

發新帖

查看: 3098|回復: 0

[分享] jQuery 輪播式廣告插件 flexslider 使用指南

發表於 2017-7-25 22:49:07 | 顯示全部樓層 |閱讀模式

Push to Facebook

發現了個不錯的jQuery幻燈片插件flexslider，有接近3000 Star，應該說是很靠譜的，下面是簡單使用教程。

引入代碼

所有代碼都可以在flexlslider的Github上獲得。

引入css 文件和js 文件和jQuery 核心代碼：

<link rel="stylesheet" href="flexslider.css">
<script src="jquery.min.js"></script>
<script src="jquery.flexslider-min.js"></script>

複製代碼

HTML 代碼：

<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
<li>
<img src="slide4.jpg" />
</li>
</ul>
</div>

複製代碼

JavaScript 代碼：

$(window).load(function() {
$('.flexslider').flexslider({
animation: 'slide', // 必備參數，自動滑動
animationLoop: true, // 是否循環滑動，默認為true
itemWidth: 500, // 定義每個item寬度，單位為px，默認為100%
itemMargin: 0, // 定義每個item margin，默認為0
controlNav: false, // 是否顯示滑動控制小圓點，默認為true
directionNav: false, // 是否顯示左右滑動控制控件，默認為true
slideshowSpeed: 2000, // 每次自動滑動間隔時間，默認為7000，單位為ms
animationSpeed: 500 // 手動點擊滑動時間，默認為600，單位為ms
});
});

複製代碼

相關帖子

臉書網友討論

jQuery, 輪播式廣告, 插件, flexslider, jQuery, 新竹網頁設計

回復

使用道具舉報

發新帖

*滑块验证:

B Color Image Link Quote Code Smilies

您需要登錄後才可以回帖登錄 | 註冊 |

本版積分規則回帖後跳轉到最後一頁

Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2024-12-12 03:28 , Processed in 0.107248 second(s), 26 queries .

本論壇言論純屬發表者個人意見，與 TShopping綜合論壇立場無關如有意見侵犯了您的權益請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表