bxSlider下载+参数说明

“bxSlider”就是一款响应式的幻灯片js插件

bxSlider特性

充分响应各种设备,适应各种屏幕;

支持多种滑动模式,水平、垂直以及淡入淡出效果;

支持图片、视频以及任意html内容;

支持触摸滑动;

支持Firefox,Chrome,Safari,iOS,Android,IE7+

bxSlider使用方法:

加载jQuery库,加载bxSlider插件文件和相关CSS文件;

    <!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" /> <!-- jQuery library -->
<script src="jquery-3.1.1.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery.bxslider.js"></script>

创建一个幻灯片区块:

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

加上bxSlider参数激活使用:

    <script>
$(document).ready(function() {
$('.bxslider').bxSlider({
mode: 'horizontal',
moveSlides: 1,
slideMargin: 40,
infiniteLoop: true,
slideWidth: 660,
minSlides: 3,
maxSlides: 3,
speed: 800,
});
});
</script>

bxSlider下载地址:官方下载

bxSlider下载地址:github下载

bxSlider具体参数:

参数 描述 默认值
mode 设置滑动模式,'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 horizontal
speed 内容切换速度,数字,ms 500
startSlide 初始滑动位置,数字 0
randomStart 随机初始滑动位置 true
infiniteLoop 循环滑动,如果设置为true时,则到最后滑动位置时会切换到初始位置 true
easing 切换动画扩展,可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果 null
captions 设置显示图片标题,当滑动内容为图片时并设置属性title,可以显示图片标题 false
video 支持视频,当设置为true时,需要jquery.fitvids.js支持 false
pager 设置是否显示分页,设置为true时,会在滑动内容下方显示分页图标 true
controls 设置是否显示上一副和下一幅按钮 true
auto 设置是否自动滑动 false
pause 自动滑动时停留时间,数字,ms 4000
autoHover 当鼠标滑向滑动内容上时,是否暂停滑动 false

轮播图-bxslider的更多相关文章

  1. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  3. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  4. CSS-用伪类制作小箭头(轮播图的左右切换btn)

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  5. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  6. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  7. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  8. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  9. superSlider实现美女轮播图

    superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...

随机推荐

  1. 自动完成 APP【字典树(Trie树)+dfs】

    自动完成 APP 传送门  来源:upc12786 题目描述 奶牛 Bessie 很喜欢用手机上网聊天,但她的蹄子太大,经常会按到好几个键造成不必要的麻烦(丢死人了,你下辈子还是不要当奶牛了).于是 ...

  2. Tensorflow从0到1(3)之实战传统机器算法

    计算图中的操作 import numpy as np import tensorflow as tf sess = tf.Session() x_vals = np.array([1., 3., 5. ...

  3. cb48a_c++_STL_算法_重排和分区random_shuffle_stable_partition

    cb48a_c++_STL_算法_重排和分区random_shuffle_stable_partition random_shuffle()//重排,随机重排,打乱顺序 partition()分区,把 ...

  4. 网站搬家之mysql 5.7 date类型默认值不能设置‘0000-00-00’的问题

    网站搬家,mysql版本由5.6升级到5.7,遇到问题: mysql 5.7之后版本datetime默认值设置'0000-00-00',出现异常:Invalid default value for ' ...

  5. Dubbo的使用及原理

    Dubbo是什么? Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点. Dubbo[]是 ...

  6. CentOS 安装 VMware Tools 详细方法

    点击虚拟机,选择安装vmware Tools工具 弹出上面的界面,右键选择奖上面的vmwaraTools.tar.gz解压到你要解压的目录下面 记得一定要使用root用户,进入到解压的目录 然后执行 ...

  7. 03.基于测试开发讲解和Cobertura框架介绍

    首先我们先 CREATE TABLE `t_user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(200) DEFAULT ...

  8. 计算机网络之tcp四次挥手

    TCP的四次挥手(Four-Way Wavehand)1.前言对于"三次握手"我们耳熟能详,因为其相对的简单.但是,我们却不常听见“四次挥手”,就算听过也未必能详细地说明白它的具体 ...

  9. Windows Defender might be impacting your build performance

    由于换了SSD, 昨天安装了最新的 Idea 2019.2+ , 然后发现每次导入项目都有如下提示: 处理方法就是在Windows安全中心排除目录 处理方式参考: 官方 Known issues An ...

  10. CSS选择器使用

    今天要对CSS选择器的使用方法做一个全面的总结(几乎全部是从这篇文章摘抄的 https://blog.csdn.net/qq_39241986/article/details/82185697) CS ...