带17种内置过渡动画的jquery轮播图插件

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