bxslider 使用帮助

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

bxSlider特性

充分响应各种设备，适应各种屏幕；

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

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

支持触摸滑动；

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

bxSlider使用方法：

加载jQuery库，加载bxSlider插件文件和相关CSS文件；

1     <!-- bxSlider CSS file -->
2     <link href="jquery.bxslider.css" rel="stylesheet" />
3
4     <!-- jQuery library -->
5     <script src="jquery-3.1.1.min.js"></script>
6     <!-- bxSlider Javascript file -->
7     <script src="jquery.bxslider.js"></script>

创建一个幻灯片区块：

1     <ul class="bxslider">
2       <li><img src="data:images/pic1.jpg" /></li>
3       <li><img src="data:images/pic2.jpg" /></li>
4       <li><img src="data:images/pic3.jpg" /></li>
5       <li><img src="data:images/pic1.jpg" /></li>
6       <li><img src="data:images/pic2.jpg" /></li>
7     </ul>

加上bxSlider参数激活使用：

 1     <script>
 2         $(document).ready(function() {
 3             $('.bxslider').bxSlider({
 4                 mode: 'horizontal',
 5                 moveSlides: 1,
 6                 slideMargin: 40,
 7                 infiniteLoop: true,
 8                 slideWidth: 660,
 9                 minSlides: 3,
10                 maxSlides: 3,
11                 speed: 800,
12             });
13         });
14     </script>

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/zhuyongzhe/p/10290389.html

bxslider 使用帮助相关推荐

jquery 轮播插件 bxslider
引入文件 <link h<script type="text/javascript" src="js/jquery-1.9.1.min.js"> ...
bxslider 纵向滑动 vertical image thumbnail slider
1. 简单版 HTML: <ul class="bxslider"><li><img src="/images/730_200/hill_t ...
jquery响应式内容滑动插件bxSlider
为什么要使用bxSslider jquery插件呢完美响应式设计,适应任何设备. 可以包含图像,视频或HTML内容. 先进的触摸响应设计,极好的交互体验. 使用CSS动画,更流畅便省资源,加硬件加速 ...
bxSlider——一个精悍的拥有一大波焦点图轮播滑动特效的Js程序
打开这个地址>>强大的支持手机端响应式的jQuery焦点图轮播特效插件bxslider.js(右键查看源代码) bxSlider官网:http://bxslider.com/ ****** ...
MBB类似jquery.bxslider插件轮播效果
首先,如图一:当打开页面是,产品出现了淡入淡出切换轮播状态,当鼠标点击左边的小图时,就会切换出相对应的大图,当鼠标移开的时候,这个轮播就会停止自动轮播,只有人工手动才能进行切换:是一个不错的体验! 如 ...
jQuery补充，基于jQuery的bxslider轮播器插件
基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head>&l ...
响应式内容滑动插件bxSlider
bxSlider特性 1.充分响应各种设备,适应各种屏幕: 2.支持多种滑动模式,水平.垂直以及淡入淡出效果: 3.支持图片.视频以及任意html内容: 4.支持触摸滑动: 5.支持Firefox,C ...
【QS】bxslider没有效果解决方案
项目场景: 在实现bxslider时,按照网页上的步骤,发现本地无法实现对应的效果. 资源来源于:bxslider官网问题描述当我们按照bxslider所提供的安装方法: <html> ...
[前端]-jquery插件bxslider用法实例分析
转载自: 原文地址:http://www.jb51.net/article/64194.htm 原文地址:https://blog.csdn.net/u013076997/article/detail ...
bxslider 旋转
这个是我自己发现的一个旋转 <!doctype html> <html> <head> <meta charset="utf-8"> ...

bxslider 使用帮助

bxslider 使用帮助相关推荐

最新文章

热门文章