• 引入:
  • <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();
});

官网:http://www.swiper.com.cn/

  

swiper使用心得的更多相关文章

  1. swiper 使用心得

    首先,我在这次学习的最大收益是,学习新框架.或者技术,先找官方文档比较好,那里的很全,你想要的基本都有的,如果没有那就是不支持喽. 然后简单概括下是怎么用的(比较谦虚,大家勿怪) 一 .找他的官方文档 ...

  2. 浅谈一下关于iscroll的使用心得

    因为最近的项目所有页面老板想做成苹果原生那种上下拉动有回弹效果的体验,浏览器自带是没有这种功能的,自己写的话兼容性可能会出大问题,要适配安卓的各种机型实在是难,所以我还是选择去使用移动端相对比较稳定的 ...

  3. Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

    Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区.       ...

  4. 兼容低版本IE浏览器的一些心得体会(持续更新)

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

  5. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  6. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  7. NoSql数据库使用半年后在设计上面的一些心得

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  8. 我的MYSQL学习心得(二) 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  9. 我的MYSQL学习心得(三) 查看字段长度

    我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

随机推荐

  1. [mysql]mysql弱密码字典检测

    1.如何定义弱密码 和用户名一致 连续字符 连续数字 空密码 2.生成弱密码字典 3.检测脚本 4.结果

  2. mac命令行配置网络

    mac命令行配置网络今天终于找到了Mac OS X通过命令行修改ip的方式了,记录如下: 修改mac地址,重启后失效sudo ifconfig en0 lladdr d0:67:e5:2e:07:f1 ...

  3. [LeetCode] 1. Two Sum ☆

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  4. 验证组件——FluentValidation

          FluentValidation FluentValidation是与ASP.NET DataAnnotataion Attribute验证实体不同的数据验证组件,提供了将实体与验证分离开 ...

  5. 「6月雅礼集训 2017 Day8」gcd

    [题目大意] 定义times(a, b)表示用辗转相除计算a和b的最大公约数所需步骤. 那么有: 1. times(a, b) = times(b, a) 2. times(a, 0) = 0 3. ...

  6. quick 用系统浏览器打开url

    需求描述: 在我们的游戏里面增加一个链接,直接用浏览器打开,进入到对应网站,进行一些支付活动. 解决: 于是我去百度了一下,发现了这篇文章,http://blog.csdn.net/teng_onth ...

  7. JQuery-Ajax后台提交数据与获取数据 Java代码

    function jqajax(){ var urlName = $("#urlName").val(); var urla = $("#url").val() ...

  8. Python中的异常处理 -- (转)

    python中的异常   异常是指程序中的例外,违例情况.异常机制是指程序出现错误后,程序的处理方法.当出现错误后,程序的执行流程发生改变,程序的控制权转移到异常处理. Exception类是常用的异 ...

  9. pcap的安装

    pcap,即 packet capture library 抓包库,这个抓包库给抓包系统提供了一个高层次的接口.所有网络上的数据包,甚至是那些发送给其他主机的,通过这种机制,都是可以捕获的.它也支持把 ...

  10. Perl6 Bailador框架(7):模版编写

    先看一个例子: use v6; use Bailador; my $data = ' <form action="", method="get"> ...