轮播图-bxslider
2024-10-09 04:39:17
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 |
最新文章
- keytool命令记录
- iOS开发中的错误整理,线程之间通信练习,加载图片的练习中出现的错误 -- Http请求错误
- DG - 开启Active Data Guard
- vscode使用php调试
- shell/bash 交集、并集、差集
- thymeleaf中的th:with用法
- C++指针学习笔记
- 用PHP实现一个高效安全的ftp服务器(二)
- 黑马程序员_Java基础组成
- ESM CORR
- Java的内存机制详解
- entos 7虚拟机安装手册
- 【java提高】---数组增删 list删除 map删除
- Java报SQLException
- dubbo+zookeeper+springboot构建服务
- MapReduce-FileInputFormat
- mysql innodb引擎 一次线上死锁分析排查步骤
- Goslate: Free Google Translate API
- Android之单元测试及数据库操作
- Unity中sharedMaterials 和 materials
热门文章
- @bzoj - 2595@ 游览计划
- CollectionView的cell长按事件实现
- PyQt5入门教程
- 油猴脚本 之 网教通直播评论记录抓取 v2.0
- [.NET 开源] 高性能的 Swifter.MessagePack 已发布,并附带新版本的 Swifter.Json 和 Swifter.Data。
- 授权函数-web_set_certificate_ex
- ado.net Web前端:关于JavaScript知识点的简单梳理
- 附017.Kubernetes_v1.17.4 Dashboard部署
- numpy(深)复制一个矩阵的方法
- android中getWidth()和getMeasuredWidth()之间的区别