jQuery插件Multiple Elements Cycle Plugin实现多元素循环

0 star

多元素循环是根椐这个jQuery插件的意思翻译的，其实这种效果就是前面介绍的图片循环类似，如上期的[jQuery插件Simple Slider简单的图片滑动效果]， 其区别在于元素不同，Multiple Elements Cycle 插件可以是任意元素，但实质上把Simple Slider插件简单的改造一下就可以实现同样的效果。Multiple Elements Cycle插件使用与Simple Slider插件方法一样，简单方例，效果图如下：
jQuery插件Multiple Elements Cycle Plugin实现多元素循环
点我查看Multiple Elements Cycle插件在线演示[在线演示]

使用说明
需要使用jQuery库文件和Multiple Elements Cycle Plugin库文件
必优推荐级别：★★★
使用实例
一，包含文件部分

  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  2. <script type="text/javascript" src="jquery.multipleelements.cycle.js"></script>

二，HTML部分

  1. <div class="cycleElementsContainer" id="biuuu">
  2. <a href="#" id="cycleElementsLeft">Scroll Left</a>
  3. <div id="cycleElements">
  4. <ul>
  5. <li>#1</li>
  6. <li>#2</li>
  7. <li>#3</li>
  8. <li>#4</li>
  9. <li>#5</li>
  10. <li>#6</li>
  11. </ul>
  12. </div>
  13. <a href="#" id="cycleElementsRight">Scroll Right</a>
  14. </div>

三，Javascript部分

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $("#biuuu").multipleElementsCycle();
  4. });
  5. </script>

如上实现，就实现了元素循环的效果，使用方法类似于上期的Simple Slider插件，具体可应用于需要显示大量内容的组件中，同时可结合Ajax动态获取，是一个非常不错的插件。

0 回答