jquery插件bxslider⽤法实例分析本⽂实例讲述了jquery插件bxslider⽤法。分享给⼤家供⼤家参考。具体⽤法如下：
⾸先调⽤对应js⽂件：
<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 >
<ul id="marquee">
<li>
<img src="img/1.jpg" alt="banner_美容"
>
</li>
<li>
<img src="img/2.jpg" alt="banner_美容"
>
</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;
}
参数说明：jquery插件分享
bxSlider 详细配置参数：
bxSlider有很多配置参数，使你能够⽤参数制作出各种各样的slider效果：
希望本⽂所述对⼤家的jQuery程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。