这是一款非常实用的基于bootstrap 3的响应式jQuery滚动新闻插件。该bootstrap滚动新闻插件可以制作为自动向上或向下滚动的模式,可以带图片显示,界面设计时尚自然,非常适合于网站制作实时滚动新闻列表。它的特点有:

  • 响应式设计
  • 轻量级
  • 使用简单
  • 可以向上或向下滚动新闻列表

bootstrap滚动新闻效果

使用方法

HTML结构

该滚动新闻插件的HTML结构使用标准的bootstrap结构来布局,新闻列表使用无序列表来制作。

News
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • ....
初始化插件

在页面加载完毕之后,可以使用下面的方法来初始化该滚动新闻插件。

$(".demo1").bootstrapNews({
    newsPerPage: 5,
    autoplay: true,
    pauseOnHover:true,
    direction: 'up',
    newsTickerInterval: 4000,
    onToDo: function () {
        //console.log(this);
    }
});                
              

配置参数

下面是该滚动新闻插件所有可用的参数选项和它的默认值。

$.fn.bootstrapNews.options = {
    newsPerPage: 4, 
    navigation: true,
    autoplay: true,
    direction:'up',
    animationSpeed: 'normal',
    newsTickerInterval: 4000, //4 secs
    pauseOnHover: true,
    onStop: null,
    onPause: null,
    onReset: null,
    onPrev: null,
    onNext: null,
    onToDo: null
};                
              
  • newsPerPage:每页显示的新闻条数。
  • navigation:是否为导航模式。
  • autoplay:是否自动滚动新闻。
  • direction:新闻的滚动方向。
  • animationSpeed:自动滚动新闻的速度。
  • newsTickerInterval:每隔几秒钟切换到下一条新闻。
  • pauseOnHover:是否在鼠标滑过是暂停新闻滚动。
  • onStop:新闻滚动停止时的回调函数。
  • onPause:新闻滚动暂停时的回调函数。
  • onReset:新闻滚动被重置时的回调函数。
  • onPrev:滚动到前一条新闻时的回调函数。
  • onNext:滚动到下一条新闻时的回调函数。
  • onToDo:回调函数。