<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta name="format-detection" content="telephone=no">

<title>MIss HY</title>

<link rel="stylesheet" href="http://m.hurongclub.com/Resource/css/base_new.css">

<link rel="stylesheet" href="http://m.hurongclub.com/Resource/css/swiper.min.css">

<script src="http://m.hurongclub.com/Resource/js/zepto.min.js"></script>

<script>

//计算根节点HTML的字体大小

function htmlFontsize(){

var deviceWidth = document.documentElement.clientWidth;

if(deviceWidth > 750){

deviceWidth = 750;

}

document.documentElement.style.fontSize = deviceWidth / 7.5 + "px";

}

//根节点HTML的字体大小初始化

htmlFontsize();

$(window).resize(function(){

htmlFontsize();

});

</script>

<style>

body{background: #f4664b;font-size:.14rem;}

.swiper-container{height:8.2rem;}

#investproSwiper{margin-top: 0.52rem;}

#investproSwiper .swiper-slide{width:5rem;height:7.25rem;}

#investproSwiper .swiper-slide .investpro{width:4.61rem;height:6.37rem;background-size: 100% 100%;background-repeat: no-repeat;margin-top: 0.58rem;margin-left: 0.19rem;-webkit-transition: all 0.5s linear;}

#investproSwiper .swiper-slide-active .investpro{width:5.16rem;height:7.25rem;margin-left:-.08rem;margin-top:.12rem;}

#investproSwiper .swiper-slide .hrplan_slide{background-image: url(images/hrplan_small.png);}

#investproSwiper .swiper-slide-active .hrplan_slide{background-image: url(images/hrplan_big.png);}

#investproSwiper .swiper-slide .newhand_slide{background-image: url(images/newhand_small.png);}

#investproSwiper .swiper-slide-active .newhand_slide{background-image: url(images/newhand_big.png);}

#investproSwiper .swiper-slide .sxm_slide{background-image: url(images/sxm_small.png);}

#investproSwiper .swiper-slide-active .sxm_slide{background-image: url(images/sxm_big.png);}

.swiper-slide a{width:3.8rem;height: .7rem;background: #eb4e39;display: block;font-size: .36rem;color: #fff;text-align: center;line-height: .7rem;border-radius: .08rem;position: absolute;left: 0;right: 0;margin: auto;bottom: .85rem;z-index: 2;}

.swiper-slide-active .investpro a{width: 4.33rem;height: .8rem;line-height: .8rem;bottom: .4rem;}

.swiper-container-horizontal>.swiper-pagination{height:.5rem;text-align:center;bottom:0;}

.swiper-pagination-bullet{background:#fff;border-radius:50%;width:.12rem;height:.12rem;margin-left:.18rem;opacity:1;}

.swiper-pagination-bullet-active{background:#e04531;}

.investproTab{width:4.6rem;height:6.37rem;position: absolute;top: 0.58rem;z-index: 2;opacity: 0;}

.investpro-prev{left:-3.6rem;}

.investpro-next{right:-3.6rem;}

</style>

</head>

<body>

<div class="swiper-container" id="investproSwiper">

<div class="swiper-wrapper">

<div class="swiper-slide">

<div class="investpro newhand_slide"><a href="##">立即投资</a></div>

</div>

<div class="swiper-slide">

<div class="investpro sxm_slide"><a href="##">立即投资</a></div>

</div>

<div class="swiper-slide">

<div class="investpro hrplan_slide"><a href="##">立即投资</a></div>

</div>

</div>

<div class="swiper-pagination"></div>

<div class="investproTab investpro-prev" id="investpro-prev"></div>

<div class="investproTab investpro-next" id="investpro-next"></div>

</div>

<script src="http://m.hurongclub.com/Resource/js/swiper-3.2.5.min.js"></script>

<script>

var abcSwiper = new Swiper("#investproSwiper", {

slidesPerView: 'auto', //设置slider容器能够同时显示的slides数量

centeredSlides: true, //设定为true时，活动块会居中，而不是默认状态下的居左。

loop: true,

speed: 500,

noSwiping: false, //设置为true时禁止切换

paginationClickable: false,

pagination : '.swiper-pagination',

prevButton:'#investpro-prev',

nextButton:'#investpro-next'

});

</script>

</body>

</html>

　　

swiper 3D 覆盖流的使用方法的更多相关文章

  1. Swiper 3D flow轮播使用方法

    swiper 的3d轮播效果,移动端适用 (1). 如需使用Swiper的3d切换首先加载3D flow插件(js和css). <head> <link rel="styl ...

  2. Java中FileOutputStream流的write方法

    本文为大家分享了FileOutputStream流的write方法,供大家参考,具体内容如下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  3. 检验实时3D像素流送平台好坏的七个标准！（上）

    将交互式3D像素流送技术作为有价值的企业工具之后,就该寻找像素流送服务供应商了.问题在于交互式3D像素流送是一种新兴技术,因此很难知道要问供应商的正确问题.在开始使用之前,这里有7个问题,您应该从候选 ...

  4. java 21 - 6 字符缓冲流的特殊方法以及该方法高效复制文件

    字符缓冲流的特殊方法: A.BufferedWriter: public void newLine():根据系统来决定换行符 private static void write() throws IO ...

  5. Npoi Web 项目中(XSSFWorkbook) 导出出现无法访问已关闭的流的解决方法

    原本在CS项目中用的好好的在BS项目中既然提示我导出出现无法访问已关闭的流的解决方法 比较郁闷经过研究 终于解决了先将方法发出来 让遇到此问题的筒子们以作参考 //新建类 重写Npoi流方法 publ ...

  6. java字符流操作flush()方法及其注意事项

    java字符流操作flush()方法及其注意事项   flush()方法介绍 查阅文档可以发现,IO流中每一个类都实现了Closeable接口,它们进行资源操作之后都需要执行close()方法将流关闭 ...

  7. 使用对象作为hashMap的键，需要覆盖hashcode和equals方法

    1:HashMap可以存放键值对,如果要以对象(自己创建的类等)作为键,实际上是以对象的散列值(以hashCode方法计算得到)作为键.hashCode计算的hash值默认是对象的地址值. 这样就会忽 ...

  8. 在linux下的使用复制命令cp，不让出现“overwrite”（文件覆盖）提示的方法。（转）

    在linux下的使用复制命令cp,不让出现“overwrite”(文件覆盖)提示的方法. 一般我们在使用cp命令时加上-f选项,希望不让出现“overwrite”的提示(文件覆盖的提示).如:# cp ...

  9. Chem 3D模型的参数值更改方法

    在化学绘图软件ChemOffice 15.1中有个专门用于绘制三维结构的组件,就是Chem 3D.通过这个组件用户可以绘制3D模型并可以通过这个组件来计算一些化学数据.在使用Chem 3D组件过程中, ...

随机推荐

  1. jsDoc 使用及配置！

    原文地址:http://www.cnblogs.com/hxling/archive/2012/11/27/2791067.html jsDoc 说白了就是帮助你生成JS的文档,但有个前提,就是你编写 ...

  2. bzoj 1614: [Usaco2007 Jan]Telephone Lines架设电话线【二分+spfa】

    二分答案,然后把边权大于二分值的的边赋值为1,其他边赋值为0,然后跑spfa最短路看是否满足小于等于k条边在最短路上 #include<iostream> #include<cstd ...

  3. 11.2NOIP模拟赛

    /* 根右左遍历后最长上升子序列 */ #include<iostream> #include<cstdio> #include<cstring> #include ...

  4. P4148 简单题（KDTree）

    传送门 KDTree 修改权值当做插入节点,不平衡就暴力重构,询问的时候判断当前节点代表的矩形是否在询问的矩形的,是的话返回答案,相离返回0,否则的话判断当前点是否在矩形内,然后继续递归下去 //mi ...

  5. 爬虫—Selenium爬取JD商品信息

    一,抓取分析 本次目标是爬取京东商品信息,包括商品的图片,名称,价格,评价人数,店铺名称.抓取入口就是京东的搜索页面,这个链接可以通过直接构造参数访问https://search.jd.com/Sea ...

  6. Mysql根据数据库的时间字段到点更新另外的状态。

    转载:https://blog.csdn.net/xingfuzhijianxia/article/details/53727820 需求如下: 添加一条提醒,被提醒人在提醒时间未到达的时候收不到此提 ...

  7. sigaction函数的功能

    sigaction函数的功能是检查或修改与指定信号相关联的处理动作(可同时两种操作). 他是POSIX的信号接口,而signal()是标准C的信号接口(如果程序必须在非POSIX系统上运行,那么就应该 ...

  8. 给Ambari集群里安装可视化分析利器工具Hue步骤（图文详解）

    扩展博客 以下,是我在手动的CDH版本平台下,安装Hue. CDH版本大数据集群下搭建Hue(hadoop-2.6.0-cdh5.5.4.gz + hue-3.9.0-cdh5.5.4.tar.gz) ...

  9. Unix\Linux | 总结笔记 |文件系统_shell重定向

    输入重定向< 从文件中获得命令需要的输入数据,适合数据源已经定义好,可重复使用 #显示文件test.txt的内容 cat < tesxt.txt #统计文件test.txt中的行数 单词数 ...

  10. JS中的对象之原型

    对象 ECMAScript做为一个高度抽象的面向对象语言,是通过_对象_来交互的.即使ECMAScript里边也有_基本类型_,但是,当需要的时候,它们也会被转换成对象. 一个对象就是一个属性集合,并 ...