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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 带17种内置过渡动画的jquery轮播图插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
带17种内置过渡动画的jquery轮播图插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-11-29
    阅读:
简要教程

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

网友评论