|
   |
| Forum Wonder Study 寓教于乐 Wonder Effect js/as/css分享 轻量级轮播FlexSlider |
| 轻量级轮播FlexSlider |
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看这里  |
| |||
| |||
