最火下载站首页
手机版
最火下载站
关注公众号
最火下载站
Flexslider左右按钮的jQuery图片切换插件  v2.1

Flexslider左右按钮的jQuery图片切换插件 v2.1

  • 软件大小:463 KB
  • 软件语言:简体中文
  • 软件类型:jQuery
  • 软件授权:
  • 发布时间:2019-08-19
  • 更新时间:2019-08-27
  • 应用平台:Windows

网友评分: 0

软件非常好(0) 软件不好用(0)

Flexslider左右按钮的jQuery图片切换插件

Flexslider左右按钮的jQuery图片切换插件

使用步骤
1、引入以下的js和css文件

<!-- Place somewhere in the <head> of your document -->

<script src="http://www.xxx.com/jquery.min.js"></script>
<script src="http://www.xxx.com/jquery.flexslider.js"></script>
2、在head标签中加入以下js代码

<script type="text/javascript" charset="utf-8">
$(window).load(function() {

//simple FlexSlider call
$('.flexslider').flexslider();

// more complex call
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flex-container",
start: function(slider) {
$('.total-slides').text(slider.count);
},
after: function(slider) {
$('.current-slide').text(slider.currentSlide);
}
});
});
</script>
3、在body标签中加入以下格式的html代码

<div class="flexslider">
<ul class="slides">
<li>
<img src="http://www.xxx.com/slide1.jpg" />
<p class="flex-caption">Caption, legend...</p>
</li>
<li>
<img src="http://www.xxx.com/slide2.jpg" />
<p class="flex-caption">Caption, legend...</p>
</li>
<li>
<img src="http://www.xxx.com/slide3.jpg" />
</li>
</ul>
</div>

参数解析
所有参数请参见:http://www.myjqueryplugins.com/jquery-plugin/flexslider

标签:jQuery,图片切换