BootStrap、jQuery UI、bxSlider组件使用
组件的使用
- 首先需要将组件下载下来放在统同级目录下
- 导入组件
- 使用组件
BootStrap
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
</head>
<body>
<div>
<!-- 使用表单组件-->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div style="clear: both;"></div>
</div>
<div>
<!-- 使用图标-->
<span class="glyphicon glyphicon-heart"></span>
</div>
<script src="jQuery-3.4.0.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
jQuery UI
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css">
</head>
<body>
<div id="slider"></div>
<script src="jQuery-3.4.0.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</body>
</html>
bxSlider
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bxslider-4-4.2.12/src/css/jquery.bxslider.css">
</head>
<body>
<div class="slider">
<div><img src="1.JPG" /></div>
<div><img src="2.JPG" /></div>
</div>
<script src="jQuery-3.4.0.js"></script>
<script src="bxslider-4-4.2.12/src/js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
$('.slider').bxSlider({
auto: true,
pause: 2000,
// 其他参数
});
});
</script>
</body>
</html>
常用参数
|参数|描述|默认值|
|-|-|
|mode|设置滑动模式，'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出|horizontal|
|speed|内容切换速度，数字，ms|500|
|startSlide|初始滑动位置，数字|0|
|randomStart|随机初始滑动位置|true|
|infiniteLoop|循环滑动，如果设置为true时，则到最后滑动位置时会切换到初始位置|true|
|easing|切换动画扩展，可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果|null|
|captions|设置显示图片标题，当滑动内容为图片时并设置属性title，可以显示图片标题|false||video|支持视频，当设置为true时，需要jquery.fitvids.js支持|false||pager|设置是否显示分页，设置为true时，会在滑动内容下方显示分页图标|true|
|controls|设置是否显示上一副和下一幅按钮|true|
|auto|设置是否自动滑动|false|
|pause|自动滑动时停留时间，数字，ms|4000|
|autoHover|当鼠标滑向滑动内容上时，是否暂停滑动|false|
