swiper.js的使用
点击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的使用的更多相关文章
- iScroll.js和swiper.js
最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...
- iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)
上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...
- 移动端开发(四):swiper.js
swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js 是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...
- Swiper.js使用教程
官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用 ...
- Swiper.js使用及API介绍
Swiper.js详细使用教程http://www.swiper.com.cn/api/start/2014/1218/140.html
- 使用swiper.js实现移动端tab切换
在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...
- css动效库animate.css和swiper.js
animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...
- 全屏使用swiper.js过程中遇到的坑
概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...
- swiper.js 多图片页面的懒加载lazyLoading
swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效.需 ...
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
随机推荐
- Scrum立会报告+燃尽图(十一月十九日总第二十七次):功能开发与修复上一阶段bug
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...
- lintcode-439-线段树的构造 II
439-线段树的构造 II 线段树是一棵二叉树,他的每个节点包含了两个额外的属性start和end用于表示该节点所代表的区间.start和end都是整数,并按照如下的方式赋值: 根节点的 start ...
- Java throw try catch
public class Runtest { public static void main(String[] args) { // TODO Auto-generated method stub T ...
- 201621123037 《Java程序设计》第3周学习总结
#Week03-面向对象入门 1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联 ...
- 【week10】规格说明书练习-吉林市1日游
假设我们全班同学及教师去吉林省吉林市1日游,请为这次活动给出规格说明书. 版本:1.0 编订:于淼 团队:2016级计算机技术全体同学 日期:2016/11/19 1.引言 1.1 编写目的 1.2 ...
- 这套C#编码规范写不错
自己总结的C#编码规范--1.命名约定篇:http://www.cnblogs.com/luzhihua55/p/CodingConventions1.html 自己总结的C#编码规范--2.命名选择 ...
- UserAgent 设置 php 抓取网页
转载:http://www.webkaka.com/tutorial/php/2013/111846/ hp抓取网页,可谓轻而易举,几行代码就可以搞定.不过,如果你有所疏忽,程序写得不够严密,就会出现 ...
- 【Python】Python流程控制
1)if条件测试 Python的比较操作 所有的Python对象都支持比较操作 测试操作符('=='操作符测试值的相等性: 'is'表达式测试对象的一致性) Python中不同类型的比较方法 数字:通 ...
- BZOJ 2004 公交线路(状压DP+矩阵快速幂)
注意到每个路线相邻车站的距离不超过K,也就是说我们可以对连续K个车站的状态进行状压. 然后状压DP一下,用矩阵快速幂加速运算即可. #include <stdio.h> #include ...
- hive 导入数据
1.load data load data local inpath "/home/hadoop/userinfo.txt" into table userinfo; " ...