jquery组件 bxslider 的使用介绍

最新推荐文章于 2024-03-15 09:34:23 发布

zbtree

最新推荐文章于 2024-03-15 09:34:23 发布

阅读量9.1k

点赞数

分类专栏： PHP

PHP 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

调用

<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