jQuery插件 自动循环幻灯片放映 新闻列表

  • 源码大小:9.51KB
  • 所需积分:1积分
  • 源码编号:19JP-3490
  • 浏览次数:729次
  • 最后更新:2023年06月19日
  • 所属栏目:幻灯片
本站默认解压密码:19jp.com 或 19jp_com

简介

News List是一个小巧但可自定义的jQuery插件,它可以将项目列表转换为带有分页控件的自动旋转幻灯片放映框

项目将在可配置的时间内淡入淡出,但任何单个项目都可以手动选择,这将停止自动循环。如果不使用默认值,则需要在newslist.css文件中更改循环器和控制链接悬停的类。

许多网站以列表格式加载信息和新闻,这是显示内容的好方法。有了这个jQuery插件,从新闻帖子列表中创建一个简单且非常有吸引力的幻灯片就是小菜一碟。

如何使用它:

1.将一组项目添加到新闻列表中。

  1. <div id="newslist">
  2. <!-- Items -->
  3. <div class="items">
  4. <div class="item">
  5. News item #1.
  6. </div>
  7. <div class="item">
  8. News item #2.
  9. </div>
  10. <div class="item">
  11. News item #3.
  12. </div>
  13. ...
  14. </div>
  15. <!-- Pagination Controls -->
  16. <div class="controls"></div>
  17. </div>

2.下载插件并将jQuery News List插件的文件插入文档中。

  1. <!-- jQuery Is Required -->
  2. <script src="/path/to/cdn/jquery.min.js"></script>
  3.  
  4. <!-- jQuery News List Plugin -->
  5. <link href="/path/to/newslist.css" rel="stylesheet" />
  6. <script src="/path/to/jquery.newslist-min.js"></script>

3.调用顶部容器上的函数以生成默认幻灯片。

  1. $(function(){
  2. $("#newslist").newslist();
  3. });

4.通过覆盖默认参数来自定义幻灯片放映,如下所示:

  1. $("#newslist").newslist({
  2.  
  3. // class of news items container
  4. 'itemsDiv' : '.items',
  5.  
  6. // class of individual news item
  7. 'item' : '.item',
  8.  
  9. // class of control link container
  10. 'controlsDiv' : '.controls',
  11.  
  12. // is auto-cycler on?
  13. 'cycler' : true,
  14.  
  15. // class for hovering over control links
  16. 'hoverClass' : 'on',
  17.  
  18. // speed, in milliseconds, of auto-cycler
  19. 'cycleSpeed' : 10000,
  20.  
  21. // speed, in milliseconds, for news item to fade in
  22. 'fadeSpeed' : 1000,
  23.  
  24. // number of times the whole slideshow should loop;
  25. // if null, will loop indefinitely
  26. 'maxLoops' : null,
  27.  
  28. // should the control links use a leading zero for items 1-9?
  29. 'leadZero' : false,
  30. });

预览截图