轮播图-bxslider
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的更多相关文章
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- 实现下来ScrollView放大轮播图
创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...
- ViewPager轮播图
LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...
- CSS-用伪类制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...
- React视角下的轮播图
天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- superSlider实现美女轮播图
superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...
随机推荐
- 自动完成 APP【字典树(Trie树)+dfs】
自动完成 APP 传送门 来源:upc12786 题目描述 奶牛 Bessie 很喜欢用手机上网聊天,但她的蹄子太大,经常会按到好几个键造成不必要的麻烦(丢死人了,你下辈子还是不要当奶牛了).于是 ...
- Tensorflow从0到1(3)之实战传统机器算法
计算图中的操作 import numpy as np import tensorflow as tf sess = tf.Session() x_vals = np.array([1., 3., 5. ...
- cb48a_c++_STL_算法_重排和分区random_shuffle_stable_partition
cb48a_c++_STL_算法_重排和分区random_shuffle_stable_partition random_shuffle()//重排,随机重排,打乱顺序 partition()分区,把 ...
- 网站搬家之mysql 5.7 date类型默认值不能设置‘0000-00-00’的问题
网站搬家,mysql版本由5.6升级到5.7,遇到问题: mysql 5.7之后版本datetime默认值设置'0000-00-00',出现异常:Invalid default value for ' ...
- Dubbo的使用及原理
Dubbo是什么? Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点. Dubbo[]是 ...
- CentOS 安装 VMware Tools 详细方法
点击虚拟机,选择安装vmware Tools工具 弹出上面的界面,右键选择奖上面的vmwaraTools.tar.gz解压到你要解压的目录下面 记得一定要使用root用户,进入到解压的目录 然后执行 ...
- 03.基于测试开发讲解和Cobertura框架介绍
首先我们先 CREATE TABLE `t_user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(200) DEFAULT ...
- 计算机网络之tcp四次挥手
TCP的四次挥手(Four-Way Wavehand)1.前言对于"三次握手"我们耳熟能详,因为其相对的简单.但是,我们却不常听见“四次挥手”,就算听过也未必能详细地说明白它的具体 ...
- Windows Defender might be impacting your build performance
由于换了SSD, 昨天安装了最新的 Idea 2019.2+ , 然后发现每次导入项目都有如下提示: 处理方法就是在Windows安全中心排除目录 处理方式参考: 官方 Known issues An ...
- CSS选择器使用
今天要对CSS选择器的使用方法做一个全面的总结(几乎全部是从这篇文章摘抄的 https://blog.csdn.net/qq_39241986/article/details/82185697) CS ...