组件的使用
- 首先需要将组件下载下来放在统同级目录下
- 导入组件
- 使用组件
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':淡入淡出 |
| speed | 内容切换速度，数字，ms |
| startSlide | 初始滑动位置，数字 |
| randomStart | 随机初始滑动位置 |
| infiniteLoop | 循环滑动，如果设置为true时，则到最后滑动位置时会切换到初始位置 |
| easing | 切换动画扩展，可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果 |
| captions | 设置显示图片标题，当滑动内容为图片时并设置属性title，可以显示图片标题 |
| controls | 设置是否显示上一副和下一幅按钮 |
| auto | 设置是否自动滑动 |
| pause | 自动滑动时停留时间，数字，ms |
| autoHover | 当鼠标滑向滑动内容上时，是否暂停滑动 |