基于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 /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});});
官方网站：/
