大佬教程收集整理的这篇文章主要介绍了jquery – 用无缝循环水平对中bxSlider轮播的活动图像？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有3 x 1000px宽的图像,我想要做的就是确保活动图像位于浏览器的中间,其他两个图像在左/右侧无限循环,如下所示：
我尝试过使用负边距技巧(左边：50％和边距左边：-500pX),但它没有用,而且bxSlider有点疯狂.
我的代码非常简单,我在这里有一个小提琴：http://jsfiddle.net/j3hgA/
<ul class="bxslider">
<li><img src="http://i.imgur.com/pOh3bXm.jpg" /></li>
<li><img src="http://i.imgur.com/VrvQUzu.jpg" /></li>
<li><img src="http://i.imgur.com/pJr77Ee.jpg" /></li>
</ul>
演示： –
http://jsfiddle.net/dush88gs/rj9r74a0/41/
<head> <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css"/> </head> <body> <div class="bxslider"> <div class="slide"><img src="images/1.jpg" width="1000" /></div> <div class="slide"><img src="images/2.jpg" width="1000" /></div> <div class="slide"><img src="images/3.jpg" width="1000" /></div> <div class="slide"><img src="images/4.jpg" width="1000" /></div> <div class="slide"><img src="images/5.jpg" width="1000" /></div> <div class="slide"><img src="images/6.jpg" width="1000" /></div> </div> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- bxSlider Javascript file --> <script src="js/jquery.bxslider.min.js"></script> <script> $(document).ready(function(){ $('.bxslider').bxSlider({ slideWidth: 900,minSlides: 2,maxSlides: 3,moveSlides: 1,pager: false,auto: true }); }); </script> </body>
CSS
div.bxslider { margin-left: 25%; margin-right: 25%; }
以上是大佬教程为你收集整理的jquery – 用无缝循环水平对中bxSlider轮播的活动图像？全部内容，希望文章能够帮你解决jquery – 用无缝循环水平对中bxSlider轮播的活动图像？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。