jquery组件 bxslider 的使用介绍

关注

转载最新推荐文章于 2026-09-24 10:01:15 发布 9.3k 阅读 AI 写同款· GEO 优化 ›

图片轮播控件 jQuery bxslider 最近，看到有好多人问图片轮播怎么写，这个东西完全不必自己写，虽然当初我刚开始学习html的时候出于兴趣写过一个，但是现在想想并没有什么卵用；在此，总结一个比较好用的图片轮播插件，jQuery的bxslider，希望对大家有用。 1、准备素材： ①首先你的目录结构应该是这样的（如果想修改目录结构，记得把html中引用js、css和图片部分修改一下，另外还要修改一下css中imag 阅读详情

调用

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>

jQuery: 部分

$(function(){
  $('#marquee').bxSlider({
        mode:'vertical', //默认的是水平
        displaySlideQty:1,//显示li的个数
        moveSlideQty: 1,//移动li的个数  
        captions: true,//自动控制
        auto: true,
        controls: false//隐藏左右按钮
  });
});

HTML: 结构

<div style="width:450px; height:296px; float:left; overflow:hidden; margin-left:200px;">
  <ul id="marquee">
            <li><img src="img/1.jpg" alt="banner_腋臭" style="width:450px; height:296px;"></li>
            <li><img src="img/2.jpg" alt="banner_腋臭" style="width:450px; height:296px;"></li>
     </ul>
</div>

CSS 样式定义左右按钮

.bx-prev{ width:12px; height:26px; background:#f00;text-indent: -999999px;z-index: 999;  position: absolute; float:left; left:455px; top:110px;}
.bx-next{ width:12px; height:26px;  background:#f00; text-indent: -999999px;z-index: 999;  position: absolute; top:110px;left:-15px;}

详细Demo：http://www.bxslider.com/examples

转自： http://bangqu.com/sql

收录于