• Page 1 of 1
  • 1
Forum » Wonder Study 寓教于乐 » Wonder Effect js/as/css分享 » 轻量级轮播FlexSlider
轻量级轮播FlexSlider
Seven
Date Fr, 2013-08-02, 17:56 | Msg 1
访问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看这里
Forum » Wonder Study 寓教于乐 » Wonder Effect js/as/css分享 » 轻量级轮播FlexSlider
  • Page 1 of 1
  • 1
Search: