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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!