正文
jQuery补充，基于jQuery的bxslider轮播器插件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
基于jQuery的bxslider轮播器插件
html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>bxslider介绍</title>
<!--引入bxslider样式文件-->
<link rel="stylesheet" href="bxslider/jquery.bxslider.min.css">
</head>
<body>
<!--普通轮播图-->
<ul class="bxslider">
<li><img src="http://placehold.it/350x150&text=FooBar1"/></li>
<li><img src="http://placehold.it/350x150&text=FooBar2"/></li>
<li><img src="http://placehold.it/350x150&text=FooBar3"/></li>
</ul>
<!--横向旋转木马轮播-->
<div class="slider1">
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
</div>
<!--纵向旋转木马轮播-->
<div class="slider8">
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar9"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar10"></div>
</div>
<!--引入jquery文件-->
<script src="jquery/jquery.min.js"></script>
<!--引入bxslider里的js-->
<script src="bxslider/jquery.bxslider.min.js"></script>
<script src="ceshi.js"></script>
</body>
</html>
js
/**
* Created by admin on 2017/5/2.
*/
$(function () {
//<!--普通轮播图-->
$('.bxslider').bxSlider({auto: true, autoControls: true}); //<!--横向旋转木马轮播-->
$('.slider1').bxSlider({auto: true, slideWidth: 200, minSlides: 2, maxSlides: 3, slideMargin: 10}); //<!--纵向旋转木马轮播-->
$('.slider8').bxSlider({
mode: 'vertical',
slideWidth: 300,
minSlides: 2,
slideMargin: 10
});
});
官方网站：http://bxslider.com/
