bsc-slider是一款带17种内置过渡动画的jquery轮播图插件。该jquery轮播图插件可以制作最基本的轮播图效果,并内置17种过渡动画效果,还可以自定义动画的easing效果。
使用方法
在页面中引入jquery和jquery.bscslider.js和jquery.bscslider.css文件。如果需要自定义easing效果,还需要引入jquery.easing.js文件。
<link rel="stylesheet" type="text/css" href="css/jquery.bscslider.css"/> <script src="js/jquery.min.js"></script> <script src="js/jquery.easing.js"></script> <script src="js/jquery.bscslider.js"></script>
HTML结构
该jquery轮播图的HTML结构采用<div>
嵌套图片的方式:
<div class="slider"> <img src="assets/imgs/img1.jpg"/> <img src="assets/imgs/img2.jpg"/> <img src="assets/imgs/img3.jpg"/> <img src="assets/imgs/img4.jpg"/> <img src="assets/imgs/img5.jpg"/> </div>
初始化插件
在页面DOM元素加载完毕之后,通过bscSlider()
方法来对轮播图进行初始化。
$('.slider').bscSlider();
配置参数
该jquery轮播图的可用配置参数如下:
// 默认值 $('.slider').bscSlider({ autoplay : true, navigation : false, duration : 6000, effect : 1, effect_speed : 750, easing : 'swing', height : 300 });
-
autoplay
:轮播图是否自动播放。 -
navigation
:轮播图是否显示前后导航按钮。 -
duration
:轮播图图片切换的间隔时间,单位毫秒。 -
effect
:内置的过渡动画效果,可选值为1-17。 -
effect_speed
:过渡动画的速度,单位毫秒。 -
easing
:easing动画函数。 -
height
:指定轮播图的高度。
bsc-slider jquery轮播图插件的github网址为:https://github.com/BSCrea/bsc-slider
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!