jQuery新闻类轮播图插件sliderBox

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery新闻类轮播图插件sliderBox
jQuery新闻类轮播图插件sliderBox
分享:

    插件介绍

    sliderBox.js是一款jQuery新闻类轮播图插件。该jQuery新闻类轮播图插件可以创建兼容ie8、带缩略图导航、以及多种过渡效果的轮播图。

    浏览器兼容性

    浏览器兼容性
    时间:2018-08-08
    阅读:
简要教程

sliderBox.js是一款jQuery新闻类轮播图插件。该jQuery新闻类轮播图插件可以创建兼容ie8、带缩略图导航、以及多种过渡效果的轮播图。

使用方法

在页面中引入jQuery、slider-box.min.js、slider-box.css文件。

<link rel="stylesheet" type="text/css" href="assets/css/slider-box.css" />
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/slider-box.min.js"></script>
                
初始化插件

创建一个sliderBox对象,然后在backgrounds参数中指定一组图片,就可以生成一个简单的轮播图。

sliderBox({
  backgrounds: ["1.jpg", "2.jpg", "3.jpg"]
});
                

可以指定是否隐藏缩略图导航。

sliderBox({
  backgrounds: ["1.jpg", "2.jpg", "3.jpg"],
  align: "right",
  hide: false // or true
});
                

还以自定义轮播图的动画过渡效果。

sliderBox({
  backgrounds: ["1.jpg", "2.jpg", "3.jpg"],
  align: "right",
  hide: false,
  effect: "random", // or 'fade', 'slide'
  direction: false // direction (for slide)
});
                

还可以为轮播图项添加描述文本。

sliderBox({
  backgrounds: ["1.jpg", "2.jpg", "3.jpg"],
  align: "right",
  hide: false,
  effect: "random",
  direction: false,
  text: ["Caption 1", 'Caption 2', "Caption 3"],
  valign: "bottom" // text alignment
});
                

该jQuery新闻类轮播图插件的github地址为:https://github.com/CharlesStover/jquery-news-slider

下一篇:没有了

网友评论