Bootslider响应式全屏相册特效

时间：2016-05-25 来源：互联网

特效说明：

一款Bootslider响应式全屏相册特效网页特效下载，该CSS3+jQuery特效适用于PC网站制作，响应式网站制作图片、相册展示应用。带左右箭头、索引按钮。请用支持HTML5+CSS3主流浏览器预览效果。（兼容测试：IE9、Firefox、Chrome、Opera、Safari、360等支持HTML5+CSS3主流浏览器）

使用方法：

1、调用CSS样式：
<link href="css/animate.css" rel="stylesheet" type="text/css" />
<link href="css/bootslider.css" rel="stylesheet" type="text/css" />
<link href="css/bs-theme-metro.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

2、调用JS插件代码：
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/touchSwipe.js" type="text/javascript"></script>
<script src="js/fitvids.js" type="text/javascript"></script>
<script src="js/bootslider.js" type="text/javascript"></script>

3、添加HTML代码：
将......之间的html和js代码；放在<body></body>之间。

4、实例化代码：
<script>
$(document).ready(function() {
var slider = new bootslider('#bootslider', {
    animationIn: "fadeInUp",
    animationOut: "flipOutX",
    timeout: 5000,
    autoplay: true,
    preload: true,
    pauseOnHover: false,
    thumbnails: true,
    pagination: true,
    mousewheel: false,
    keyboard: true,
    touchscreen: true
});
slider.init();
});
</script>

标签相册特效响应式图片特效 Bootslider

预览收藏分享评论