幻灯片/轮播
多种过渡动画jQuery轮播图插件
PetitQ
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：指定轮播图的高度
Github 网址为：https://github.com/BSCrea/bsc-slider
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
