|
   |
| Forum » Wonder Study 寓教于乐 » Wonder Effect js/as/css分享 » 轻量级滑动轮播slides.js (slides.js) |
| 轻量级滑动轮播slides.js |
Date Tu, 2013-01-08, 17:26 | Msg 1
 
访问slidesJS网站 >
轮播效果有很多，slidesJS小巧易搞定兼容好，用法如下： 步骤一：在html里面这样写 Code <div id="slides"> <div class="slides_container"> <div><img src="http://image/bg00.png"></div> <div><img src="http://image/bg01.png"></div> <div><img src="http://image/bg02.png"></div> <div><img src="http://image/bg03.png"></div> </div> </div> 上面轮的是图片，slideJS其实不限div里面的内容 步骤二：引用js文件且在页面里设置参数 Code <script type="text/javascript" src="../Scripts/slides.min.jquery.js"></script> <script> $(function(){ $('#slides').slides({ preload: true, //是否预载入图片 preloadImage: 'images/loading.gif', //载入icon的路径 play: 5000, //自动播放的间隔时间 pause: 2500, //翻页按钮的响应延时时间 hoverPause: true, //鼠标移入时中止播放 generateNextPrev: true, //生成上页下页按钮 next: 'next', //设置下页按钮名 prev: 'prev', //设置上页按钮名 pagination: true, //使用翻页效果，设置为false会没效果咯，一般不设置 generatePagination: true //生成页码控件，如果设为false，页面间的跳转会报错 }); }); </script> 更多参数设置去slideJS网站看，很详细不过是英文的 步骤三：css要写这些东西—— Code <style type="text/css" media="screen"> .slides_container { width:570px; height:270px; } .slides_container div { width:570px; height:270px; display:block; } </style> 一个是容器的高宽，一个是单元高宽，可以自己设置，要点是两者一样大 页码和翻转按钮的style也可以自己设置哦 这样就完成了，很好搞定有木有 效果看这里 想换用FlexSlider看这里  |
Date Tu, 2013-09-17, 18:26 | Msg 2
SlidesJS 3
SlidesJS更新到3了，3增加了fade这种切换方式，另外code简化了，但是生成的页面增加了较复杂的结构。 自动播放、翻页和页码都支持独立的切换方式，互不影响。 下面来看看新的code Code <div id="slides"> <img src="http://placehold.it/1"> <img src="http://placehold.it/2"> <img src="http://placehold.it/3"> </div> JS部分 Code $(function(){ $("#slides").slidesjs({ width: 700, height: 377 }); }); 不知道为什么长宽变成必须设置的了，其他预设属性可以去他们官网看。 -------------------------------------------------------我是平凡的分隔线------------------------------------------------------- SlidesJS VS FlexSlider 文件大小：SlidesJS绝对的轻量级，胜出 加载：SlidesJS不需要等内容加载完便可显示，FlexSlider需要内容加载完才会显示，各有需求群，平手 自定义样式：两种均支持滑动和淡入淡出效果，支持自定义翻页，SlidesJS3不支持自定义页码，两者均支持响应式界面尺寸，FlexSlider略胜 功能：SlidesJS2支持页面内容实现页码功能，SlidesJS3及FlexSlider均不支持，SlidesJS2胜出 最后，两者均免费 |
| |||
| |||
