分享程序员开发的那些事...
更新时间：2022-09-27 15:10:53
这个是我自己发现的一个旋转
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
<title>强大的支持手机端响应式的jQuery焦点图轮播特效插件bxslider.js</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css">
<style>
p{ width:100%; height:40px; font-size:20px; color:#333; line-height:40px; text-align:center; font-family:"微软雅黑"}
</style>
</head>
<body>
<!-- ---------------------------------slider1--------------------------------------------- -->
<p>slider1(maxSlides)</p>
<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>
<script type="text/javascript">
$(document).ready(function(){
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider2--------------------------------------------- -->
<p>slider2(slideWidth auto)</p>
<div class="slider2">
<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 class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider2').bxSlider({
slideWidth: 300,
auto: true,
autoControls: true,
minSlides: 2,
maxSlides: 2,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider3--------------------------------------------- -->
<p>slider3(moveSlides)</p>
<div class="slider3">
<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 class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider3').bxSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider4--------------------------------------------- -->
<p>slider4(startSlide)</p>
<div class="slider4">
<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 class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider4').bxSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
startSlide: 1,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider5--------------------------------------------- -->
<p>slider5(Vertical)</p>
<div class="slider5">
<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 class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider5').bxSlider({
mode: 'vertical',
slideWidth: 200,
minSlides: 2,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider6--------------------------------------------- -->
<p>slider6(Image)</p>
<div class="slider6">
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar4"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider6').bxSlider({
mode: 'fade',
slideWidth: 600,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider7--------------------------------------------- -->
<p>slider7(infiniteLoop hideControlOnEnd)</p>
<div class="slider7">
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar4"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider7').bxSlider({
slideWidth: 600,
infiniteLoop: false,
hideControlOnEnd: true,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider8--------------------------------------------- -->
<p>slider8(adaptiveHeight)</p>
<div class="slider8">
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/600x300&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/600x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/600x250&text=FooBar4"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider8').bxSlider({
slideWidth: 600,
adaptiveHeight: true,
startSlides: 0,
slideMargin: 10
});
});
</script>
<!-- ---------------------------------slider9--------------------------------------------- -->
<p>slider9(ticker)</p>
<div class="slider9">
<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 class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider9').bxSlider({
slideWidth: 200,
minSlides: 3,
maxSlides: 3,
ticker: true,
speed: 12000,
startSlides: 0,
slideMargin: 10
});
});
</script>
</body>
</html>
也是在一个div 里面嵌套一个div 注意引用 js css 的顺序
还可以是
2、准备滑动内容，我们创建一个ul.bxslider，然后在其子元素li中加入滑动内容，滑动内容可以是图片、视频以及任意html内容：
<ul class="bxslider">
<li><img src="images/s1.jpg" /></li>
<li><img src="images/s2.jpg" /></li>
<li><img src="images/s3.jpg" /></li>
</ul>3、调用bxSlider插件，当页面内容加载完时调用bxSlider。
$(function(){
$('.bxslider').bxSlider();
});参考
https://www.helloweba.com/view-blog-219.html
本文转自wiwi博客51CTO博客，原文链接http://blog.51cto.com/wiwili/1969641如需转载请自行联系原作者
wiwili