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>

View Code

创建一个幻灯片区块：

    <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>

View Code

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

转载于:https://www.cnblogs.com/shuai1991/p/11165653.html

轮播图-bxslider相关推荐

jq bxslider轮播图
参考地址:https://blog.csdn.net/william_han1989/article/details/80305370 <!DOCTYPE html> <html&g ...
超级简单的jquery轮播图demo
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>轮播图 ...
bootstrap 两个轮播图冲突_Bootstrap的轮播图样式
轮播效果是一个幻灯片效果,使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放,它适用于一系列图像.文本或自定义标记,还包括对上一个/下一个图的浏览控制和指令支持. 轮播组件不支持互相 ...
轮播切换_javascript基础（一）——轮播图
javascript基础(一)--轮播图 1.轮播图的实现原理轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中.然后再将ul标签放进div中, ...
微信小程序自定义轮播图滚动样式自定义组件轮播图的实现
效果图: 实现代码: wxml <view class="card card_b"><swiper autoplay="{{true}}" i ...
Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
vue2.0 + vux （五）api接口封装及首页轮播图制作
1.安装 jquery 和 whatwg-fetch (优雅的异步请求API) npm install jquery --save npm install whatwg-fetch --save 2. ...
画布之轮播图片HTML5,Axure原型设计之轮播图
轮播图是网页设计或者APP设计常见的元素,学会使用axure原型工具制作轮播图对制作PC端或者移动端的原型都非常有帮助.现在讲讲如何使用axure8.0制作轮播图原型~~ 步骤一:(轮播图动态面板) ...
【python教程入门学习】用pyecharts绘制带动画效果的“时间轮播图
今天我们要分享的是一个数据可视化的案例. 在讲述本文之前,为了满足大家的好奇心,我们先来看看最终做出来的效果呈现. 不管学习什么技术,官网是最好的老师.对于pyecharts绘图库,知道了他的绘图原理 ...

轮播图-bxslider

bxSlider下载+参数说明

轮播图-bxslider相关推荐

最新文章

热门文章