您的位置：首页 > Web前端 > JQuery

jQuery 插件 flexslider 初步使用

2014-07-06 16:23 316 查看

发现了个不错的 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 代码：

<!-- Place somewhere in the <body> of your page -->
<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
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航