• Page 1 of 1
  • 1
轻量级轮播FlexSlider
访问FlexSlider网站 >

这个和之前的slideJS差不多哦,目测切换多了个渐隐效果(fade),缺点是如果轮播的内容很多那么加载真的很慢,慎用

首先下载flexslider包,里面有两个文件要用,一个js一个ccs(如果你要用他前后翻页的按钮又不想改css,那个按钮图片也要用)

步骤一,引入flexslider的css


Code
<link href="../flexslider.css" type="text/css" />

里面的东西可以按自己的需求改,擅长css的亲们,这里不多解释了

步骤二,引入flexslider.js(之前要有jQuery哦,本站用的是v1.7.2),初始化轮播模块


Code
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider({
//要自设参数写这里
         });
      });
</script>

flexslider可自设的东东比较多,可以参考这里

步骤三,html里面这样写

Code
<div class="flexslider">
      <ul class="slides">
        <li>
          <img src="slide1.jpg" />
          <p>photo descriptions</p>
        </li>
        <li>
          <img src="slide2.jpg" />
          <p>photo descriptions</p>
        </li>
        <li>
          <img src="slide3.jpg" />
          <p>photo descriptions</p>
        </li>
      </ul>
</div>

li里面的东西自己加,目测神马都可以加

要看效果点这里,必须登录的用户才可以看到哦

想换用SlidesJS看这里
  • Page 1 of 1
  • 1
Search: