jquery.bxSlider响应式滑动插件

收藏

本文将介绍一款基于jQuery的响应式内容滑动插件，支持多种滑动模式（水平、垂直、淡入淡出效果），支持移动端并兼容主流浏览器。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

1、首先引入jQuery.js，bxSlider.js和bxSlider.css。

<link rel="stylesheet" type="text/css" href="jquery.bxslider.css"> 
<script src="jquery.js"></script> 
<script src="jquery.bxslider.min.js"></script>

2、我们创建一个ul.bxslider，让子元素li中加入滑动内容，滑动内容可以是图片、视频或任意html内容：

<ul class="bxslider"> 
      <li><img src="images/pic1.jpg" /></li> 
      <li><img src="images/pic2.jpg" /></li> 
      <li><img src="images/pic3.jpg" /></li> 
</ul>

3、调用bxSlider很简单.代码如下：

$(function(){ 
    $('.bxslider').bxSlider(); 
});

演示文件里提供了4个demo，主题分别为演示1:标准 演示2：带标题的图片滑动 演示3：自动滑动控制演示4：垂直滑动。

bxSlider参数设置