点击api文档地址

(1)图片轮播banner

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/flexible.js"></script>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/swiper.min.css">
<!--banner-->
<div class="g-banner swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/banner_02.png">
</div>
<div class="swiper-slide">
<img src="img/banner_02.png">
</div>
<div class="swiper-slide">
<img src="img/banner_02.png">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<!--banner-->

样式覆盖,其实就是改了分页的按钮的样式。

.g-banner .swiper-slide img {
width: 10rem;
height: 4.69rem;
} .g-banner .swiper-pagination-bullets {
width: 1.81rem !important;
height: 0.43rem !important;
background: rgba(73, 73, 73, 0.5) !important;
border-radius: 0.21rem 0.21rem !important;
left: 50% !important;
margin-left: -0.9rem !important;
line-height: 0.43rem !important;
} .g-banner .swiper-pagination-bullet {
width: 0.24rem !important;
height: 0.24rem !important;
background: #e1d0d2 !important;
opacity: 1 !important;
} .g-banner .swiper-pagination-bullet-active {
background: #a11d2c !important;
opacity: 1 !important;
}

控制器里的参数,按需求,api文档很详细。

 var mySwiperBanner = $(".g-banner.swiper-container").swiper({
direction: 'horizontal',//水平滚动
loop: true,//循环
autoplay: 3000,//自动播放
// 如果需要分页器
pagination: '.swiper-pagination'
});

关于swiper.js的初始化,官网是这样的,如下图。如果整个项目只有一处需要用到swiper,那就可以这么使用,

但是我的项目中有很多需要用到的地方,所以就要初始化很多个不同的swiper。那就使用如上一个代码辣样的方式初始化swiper,

上面的就初始化了一个专门用于轮播图的swiper。

(2)实现如下图所示的效果,

轮播这一模块,导航栏中对应的tab标签被选中;

点击上面的tab标签,能切换到相应的页面。

<div class="g-design">
<div class="m-title">
<a href="javascript:;">
<i class="u-bg public-logo"></i>
<span class="u-title-name">公益展示</span>
<div class="design-style" id="public-list">
<span class="current">水电</span>
<span>木</span>
<span>瓦</span>
<span>煤</span>
</div>
<i class="u-bg moreInfo"></i>
</a>
</div>
<div class="m-public-parent">
<div class="swiper-container">
<div class="swiper-wrapper" id="slide-public">
<div class="swiper-slide">
<div class="m-public-box">
<img src="img/gyzs_10.png" alt="">
<span class="ellipses w-4">工地装修情况展示</span>
</div>
<div class="m-public-box">
<img src="img/gyzs_10.png" alt="">
<span class="ellipses">工地装修情况展示</span>
</div>
<div class="m-public-box">
<img src="img/gyzs_10.png" alt="">
<span class="ellipses">工地装修情况展示</span>
</div>
<div class="m-public-box">
<img src="img/gyzs_10.png" alt="">
<span class="ellipses">工地装修情况展示</span>
</div>
</div>
<div class="swiper-slide">
。。。
</div>
<div class="swiper-slide">
。。。
</div>
<div class="swiper-slide">
。。。
</div>
</div>
</div>
</div>
</div>

滑动slide页面,则tags标签里对应的被选中。使用回调函数:onSlideChangeStart

  var mySwiperPublic = $(".m-public-parent .swiper-container").swiper({
direction: 'horizontal',
onSlideChangeStart: function (swiper) {
console.log(swiper.activeIndex);
var i = swiper.activeIndex;
$("#public-list").find('span').eq(i).addClass("current").siblings().removeClass("current");
}
});

结合下方api文档的介绍,上述的代码很简单,一看就能懂,不赘述

  

使用tags标签来控制slide,则使用swiper方法中的slideTo方法,结合下图所示的方法,操作起来万分简单。

$("#public-list span").each(function(i,e){
$(e).on("click",function(){
$(e).addClass("current").siblings().removeClass("current");
mySwiperPublic.slideTo(i, 1000, false);
return false;
});
});

swiper.js的使用的更多相关文章

  1. iScroll.js和swiper.js

    最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...

  2. iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)

                      上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...

  3. 移动端开发(四):swiper.js

    swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js    是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...

  4. Swiper.js使用教程

    官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用 ...

  5. Swiper.js使用及API介绍

    Swiper.js详细使用教程http://www.swiper.com.cn/api/start/2014/1218/140.html

  6. 使用swiper.js实现移动端tab切换

    在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...

  7. css动效库animate.css和swiper.js

    animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...

  8. 全屏使用swiper.js过程中遇到的坑

    概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...

  9. swiper.js 多图片页面的懒加载lazyLoading

    swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效.需 ...

  10. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

随机推荐

  1. Scrum立会报告+燃尽图(十一月十九日总第二十七次):功能开发与修复上一阶段bug

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...

  2. lintcode-439-线段树的构造 II

    439-线段树的构造 II 线段树是一棵二叉树,他的每个节点包含了两个额外的属性start和end用于表示该节点所代表的区间.start和end都是整数,并按照如下的方式赋值: 根节点的 start ...

  3. Java throw try catch

    public class Runtest { public static void main(String[] args) { // TODO Auto-generated method stub T ...

  4. 201621123037 《Java程序设计》第3周学习总结

    #Week03-面向对象入门 1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联 ...

  5. 【week10】规格说明书练习-吉林市1日游

    假设我们全班同学及教师去吉林省吉林市1日游,请为这次活动给出规格说明书. 版本:1.0 编订:于淼 团队:2016级计算机技术全体同学 日期:2016/11/19 1.引言 1.1 编写目的 1.2 ...

  6. 这套C#编码规范写不错

    自己总结的C#编码规范--1.命名约定篇:http://www.cnblogs.com/luzhihua55/p/CodingConventions1.html 自己总结的C#编码规范--2.命名选择 ...

  7. UserAgent 设置 php 抓取网页

    转载:http://www.webkaka.com/tutorial/php/2013/111846/ hp抓取网页,可谓轻而易举,几行代码就可以搞定.不过,如果你有所疏忽,程序写得不够严密,就会出现 ...

  8. 【Python】Python流程控制

    1)if条件测试 Python的比较操作 所有的Python对象都支持比较操作 测试操作符('=='操作符测试值的相等性: 'is'表达式测试对象的一致性) Python中不同类型的比较方法 数字:通 ...

  9. BZOJ 2004 公交线路(状压DP+矩阵快速幂)

    注意到每个路线相邻车站的距离不超过K,也就是说我们可以对连续K个车站的状态进行状压. 然后状压DP一下,用矩阵快速幂加速运算即可. #include <stdio.h> #include ...

  10. hive 导入数据

    1.load data load data local inpath "/home/hadoop/userinfo.txt" into table userinfo; " ...