swiper使用心得
- 引入:
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
- 创建:html
<div class="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide_ban1">
<div class="inner">
<div class="download">
<a href="javascript:Get_layer('./webroot/layer.html','721px','482px')"><img src="./webroot/images/bannerdwnews_04.png" alt=""></a>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="./webroot/images/reBnner_03.jpg" alt="">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
- 创建css样式
/*banner start*/
.banner .swiper-slide_ban1{
height: 487px;
background: url(../images/rebnner_02.png) no-repeat;
background-position: center;
position: relative;
}
.banner .swiper-slide_ban1 .download{
position:relative;
width:%;
height:478px;
}
.banner .swiper-slide_ban1 .download a>img{
position: absolute;
top: 279px;
left: 450px;
}
.banner .swiper-slide_ban1 .download a:hover{
cursor: pointer;
}
- 创建js
var swiper = new Swiper('.swiper-container', {
effect : 'fade', //效果
autoplay: , //自动轮播,不写为手动轮播
speed:, //速度
autoplayDisableOnInteraction: false,//停止后自动开始
pagination: '.swiper-pagination', //创建小圆点
nextButton: '.swiper-button-next',//上一页按钮
prevButton: '.swiper-button-prev',//下一页按钮
slidesPerView: ,//定位z-index
paginationClickable: true,//允许鼠标拖拽
spaceBetween: , //盒子间的距离,无缝效果就是0
loop: true //无限循环模式
});
//鼠标移入移出控制
$('.swiper-container').mouseenter(function () {
swiper.stopAutoplay();
}).mouseleave(function () {
swiper.startAutoplay();
});
swiper使用心得的更多相关文章
- swiper 使用心得
首先,我在这次学习的最大收益是,学习新框架.或者技术,先找官方文档比较好,那里的很全,你想要的基本都有的,如果没有那就是不支持喽. 然后简单概括下是怎么用的(比较谦虚,大家勿怪) 一 .找他的官方文档 ...
- 浅谈一下关于iscroll的使用心得
因为最近的项目所有页面老板想做成苹果原生那种上下拉动有回弹效果的体验,浏览器自带是没有这种功能的,自己写的话兼容性可能会出大问题,要适配安卓的各种机型实在是难,所以我还是选择去使用移动端相对比较稳定的 ...
- Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮
Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区. ...
- 兼容低版本IE浏览器的一些心得体会(持续更新)
前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...
- 微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- NoSql数据库使用半年后在设计上面的一些心得
NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...
- 我的MYSQL学习心得(二) 数据类型宽度
我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(三) 查看字段长度
我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
随机推荐
- Naming Company CodeForces - 794C
Oleg the client and Igor the analyst are good friends. However, sometimes they argue over little thi ...
- HDU3265 线段树(扫描线)
Posters Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- STM32串口发送第一个字符丢失解决之道
stm32用printf函数重定向到串口USART1发现第一个字符没打印出来具体如下: 刚开始修改fputc函数如下: int fputc(int ch,FILE *f){USART_SendData ...
- Git版本回退的最佳方式
使用git开发的过程中,存在误提交的时候怎么办呢?不用慌张,强大的git提供了两种版本回退的方式,可以让你恢复提交之前的内容: 方式一:reset(不推荐) 通过reset的方式,把head指针指向之 ...
- bzoj 2083: [Poi2010]Intelligence test——vecto+二分
Description 霸中智力测试机构的一项工作就是按照一定的规则删除一个序列的数字,得到一个确定的数列.Lyx很渴望成为霸中智力测试机构的主管,但是他在这个工作上做的并不好,俗话说熟能生巧,他打算 ...
- google protobuf序列化原理解析 (PHP示例)
一.简介 Protocol Buffers是谷歌定义的一种跨语言.跨平台.可扩展的数据传输及存储的协议,因为将字段协议分别放在传输两端,传输数据中只包含数据本身,不需要包含字段说明,所以传输数据量小, ...
- Spring理论基础-面向切面编程
AOP是Aspect-Oriented Programming的缩写,中文翻译是面向切面编程.作为Spring的特征之一,是要好好学习的. 首先面向切面编程这个名称很容易让人想起面向对象编程(OOP) ...
- PAT L1-009 N个数求和(运用GCD进行通分)
题目链接:https://www.patest.cn/contests/gplt/L1-009 题目: 本题的要求很简单,就是求N个数字的和.麻烦的是,这些数字是以有理数“分子/分母”的形式给出的,你 ...
- 基于springmvc静态文件资源配置问题
1.在这里只教大家一种非常实用的 比较简单的一种: 如果两种都配置记得注释掉这种:
- Xutils使用详解
刚开始的时候,在 GitHub 上面出现了一款强大的开源框架叫 xUtils,里面包含了很多实用的android工具,并且支持大文件上传,更全面的 http 请求协议支持(10种谓词),拥有更加灵活的 ...