当前位置:JS特效 » 幻灯片和轮播图 » 带17种内置过渡动画的jquery轮播图插件
 带17种内置过渡动画的jquery轮播图插件
如果您觉得内容不错,请分享:
标签: 轮播图幻灯片

插件介绍

bsc-slider是一款带17种内置过渡动画的jquery轮播图插件。该jquery轮播图插件可以制作最基本的轮播图效果,并内置17种过渡动画效果,还可以自定义动画的easing效果。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:57
简要教程

bsc-slider是一款带17种内置过渡动画的jquery轮播图插件。该jquery轮播图插件可以制作最基本的轮播图效果,并内置17种过渡动画效果,还可以自定义动画的easing效果。

使用方法

在页面中引入jquery和jquery.bscslider.js和jquery.bscslider.css文件。如果需要自定义easing效果,还需要引入jquery.easing.js文件。





                
HTML结构

该jquery轮播图的HTML结构采用

嵌套图片的方式:

初始化插件

在页面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

Top