|
Easy Slider 是一个滑动门插件，支持任何图片或内容，当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置，可通过CSS来进行完全的控制。所以，基本上你只需要链接这个插件文件后，设置好内容，然后样式化CSS就可以了。
 EasySlider的功能 支持横向或纵向滑动 支持自动滚动 支持连续滑动 “上一屏”和”下一屏按钮” “到第一屏”和”最后一屏”按钮 隐藏的控制 可选的控制按钮包围标记 同一页面可支持多个滑动门 可设置滑动速度、是否自动、停顿间隔等等 EasySlider的使用方法 1. 首先是html标记 <div id="slider"> <ul> <li>content here...</li> <li>content here...</li> <li>content here...</li> ... </ul> <span id="prevId"><a href="javascript:void(0);">previous</a></span> <span id="nextBtn"><a href="javascript:void(0);">Next</a></span> </div> 注: 每个li里面的内容就是一个滑动层，下面的span用于滑动导航。 2. 然后调用jquery库和EasySlider插件 <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/easySlider.js"></script> 注: 放于</header>之前 3. 初始化插件代码 <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ prevText: 'previous Slide', nextText: 'Next Slide', orientation: 'vertical' }); }); </script> 注: 放于上面的代码下面，其中的#sidebar对应HTML标记中div元素的CSS选择器，指明脚本应用于这个层，你也可以使用class名称，那这里就写成类似于 $(“.list”)。 .easyslider 拥有许多参数，具体查看作者的原文. 4. CSS样式定义 #slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider, #slider li{ width:500px; height:200px; overflow:hidden; } span#prevBtn{} span#nextBtn{} 注: 根据你自己的需要进行样式化。 这样就OK了。 |