点击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. C++ 名字空间namespace的使用

    A namespace is a scope.C++ provides namespaces to prevent name conflicts.A namespace is a mechanism ...

  2. 作业 20181016-1 Alpha阶段贡献分配规则

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2244 条件:八位同学,总共80分贡献分(贡献分总数以实际为准),投票方式 ...

  3. 王者荣耀交流协会 - 第7次Scrum会议(第三周)

    1.例会照片 照片由王超(本人)拍摄,组内成员刘耀泽,高远博,王磊,王玉玲,王超,任思佳,袁玥全部到齐. 2.时间跨度: 2017年11月2日 17:00 — 17:20 ,总计20分钟. 3.地 点 ...

  4. Java 常用类String类、StringBuffer类

    常用类 String类.StringBuffer类 String代表不可变的字符序列 "xxxxxxx"为该类的对象 举例(1) public class Test { publi ...

  5. JDK源码分析 – HashMap

    HashMap类的申明 HashMap的定义如下: public class HashMap<K,V> extends AbstractMap<K,V> implements ...

  6. selenium webdriver XPath的定位方法练习 !

    html  代码: <html> <body> <div id="div1"> <input name="divl1input& ...

  7. 【APS.NET Core】- launchSettings.json

    launchSettings.json文件为一个ASP.NET Core应用保存特有的配置标准,用于应用的启动准备工作,包括环境变量,开发端口等.在launchSettings.json文件中进行配置 ...

  8. dbgrid多选日记

    procedure TForm1.DBGrid1KeyPress(Sender: TObject; var Key: Char); begin then begin DBGrid1.DataSourc ...

  9. 【bzoj5147】casino 区间dp

    题目描述 赌城拉斯维加斯的米高梅大赌场最近推出了一种新式赌法.它的玩法是由庄家设局(所用赌具是一批五颜六色的筹码),赌徒只要交付一定数额的赌资即可入局.开赌前庄家将手中的筹码依次排开铺成一排构成一局, ...

  10. BZOJ4974 字符串大师(kmp)

    显然最短循环节长度=i-next[i],则相当于给定next数组构造字符串.然后按照kmp的过程模拟即可.虽然这看起来是一个染色问题,但是由图的特殊性,如果next=0只要贪心地选最小的就可以了,稍微 ...