最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jquery.bxSlider响应式滑动插件

来源:http://www.erdangjiade.com/ 沐浴春风 2014-12-09 17:31浏览(1901)

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

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

jquery.bxSlider响应式滑动插件
分类:图片代码 > 图片滑动 难易:中级
查看演示

加我微信,拉你进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参数设置

参数 描述 默认值
mode 滑动三种模式:'horizontal':水平、'vertical':垂直及'fade':淡入淡出 horizontal
speed 内容切换速度(ms) 500
startSlide 初始滑动位置 0
randomStart 是否开启随机初始滑动位置 true
infiniteLoop 循环滑动,若为true,则到最后滑动位置时会切换到初始位置 true
easing 切换动画扩展效果 null
captions 是否显示图片标题,当滑动内容为图片时并设置属性title,就会显示图片标题 false
video 支持视频,当设置为true时,必须要引入jquery.fitvids.js false
pager 是否显示分页,当为true时,会在滑动内容下方显示分页条 true
controls 是否显示上一组和下一组控制按钮 true
auto 是否自动滑动 false
pause 自动滑动停留时间(ms) 4000
autoHover 鼠标滑到内容上时,是否暂停滑动 false
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/16.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    10-07 17:51
    ngu137
    不错学习啦。。。。。
  • 头像 沙发
    09-25 08:23
    ngu137
    不错,收藏。。。。。。。。
1 2