github地址

首先我是利用swiper.js做的，因为这个很强大，哈哈~~，上代码

html很简单

<body>

	  <div class="swiper-container">

	    	<div class="swiper-wrapper">

		      	<div class="swiper-slide">

		                  <img src="https://common.ofo.so/campaign/valentine/images/ditie4.png" alt="" class="swiper-item">

				</div>

		      	<div class="swiper-slide">

		                  <img src="https://common.ofo.so/campaign/valentine/images/ditie3.png" alt="" class="swiper-item">

				</div>

				<div class="swiper-slide">

		                  <img src="https://common.ofo.so/campaign/valentine/images/ditie2.png" alt="" class="swiper-item">

				</div>

				<div class="swiper-slide">

		                  <img src="https://common.ofo.so/campaign/valentine/images/ditie1.png" alt="" class="swiper-item">

				</div>

	    	</div>

		    <!-- Add Pagination -->

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

	  </div>

</body>

　js　

<script src="js/swiper.min.js"></script>

<script>

   var swiper = new Swiper('.swiper-container', {

      slidesPerView: 2, //每屏显示的个数

      loopedSlides: 5,   //一般与slidersPerView一起使用

      centeredSlides: true,

      spaceBetween: 30, //间隔距离

      pagination: {

        el: '.swiper-pagination',

        clickable: true,

      }

    });

</script>

　

  css部分　

html, body {

          position: relative;

          height: 100%;

        }

    body {

      background: #fff;

      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

      font-size: 14px;

      color:#000;

      margin:;

      padding:;

    }

   .swiper-container {

      width: 100%;

      height: 250px;

      padding-top: 20px;

      margin-top: 20px;

    }

    .swiper-slide {

        position: relative;

        top:;

      text-align: center;

      font-size: 18px;

      background: #fff;

      /* Center slide text vertically */

      display: -webkit-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: flex;

      -webkit-box-pack: center;

      -ms-flex-pack: center;

      -webkit-justify-content: center;

      justify-content: center;

      -webkit-box-align: center;

      -ms-flex-align: center;

      -webkit-align-items: center;

      align-items: center;

      width: 60%;

      height:100%;

    }

   .swiper-slide.swiper-slide-active{

          -webkit-transform: scale(1.2);

        transform: scale(1.2);

        z-index:;

   }

   .swiper-slide.swiper-slide-prev,.swiper-slide.swiper-slide-next{

        -webkit-transform: scale(0.8);

        transform: scale(0.8);

   }

   .swiper-item{

        width: 290px;

        position: absolute;

        top:;

        left: 50%;

        transform: translateX(-50%);

    }

主要是改变css的样式

仿ofo单车做一个轮播效果的更多相关文章

  1. 用JQ去实现一个轮播效果

    前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body> <div class="pic"> <div ...

  2. 小程序或者vue，解决菜单导航做做成轮播的样子

    案例: 其中最重要的思路就是如何让第二次或第三次以及后面的轮播有数据: 做法大致跟轮播图做法一样,只不过我们需要进行书写样式,代码如下: <!-- 做一个轮播图navbar demo --> ...

  3. 为什么使用bootstrap在一个页面同时做两个轮播效果时，只有第一个有效？？

    我们都知道使用bootstrap做轮播效果非常快,但是有时候一个页面会需要两个轮播:但这个时候再次使用bootstrap做轮播效果时就会失效:原因在于bootstrap的Carousel问题,只要修改 ...

  4. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  5. 常见的仿Flash图片轮播效果

    现在基本在很多网站上都能看到轮播效果,虽然有点烂大街的赶脚,但是这个效果确实很好看,很时尚,今天分享下代码相对较少的轮播框架,望采纳 . ①向左滑动: 思路: 将几个图片用分别用几个 li 包住,并且 ...

  6. css3关键帧动画实现轮播效果

    实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...

  7. js的轮播效果

    图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...

  8. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  9. jQuery实现轮播效果(一) - 基础

    前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...

随机推荐

  1. Java中如何获取spring中配置的properties文件内容

    有2种方式: 一. 1.通过spring配置properties文件 [java]  <bean id="propertyConfigurer"      class=&qu ...

  2. 006 Cisco switch prewired

    Switch>en Switch#config t Enter configuration commands, one per line.  End with CNTL/Z. Switch(co ...

  3. DELL T110II Server如何通过RAID 级别迁移的方式在OMSA下实现磁盘阵列扩容？

    目录: RAID 转移规则说明 操作步骤 本文介绍了 通过RAID 级别转换来实现扩容的方法注意:本文相关RAID的操作,仅供在测试环境里学习和理解戴尔PowerEdge服务器RAID控制卡的功能和使 ...

  4. react 项目实战（九）登录与身份认证

    SPA的鉴权方式和传统的web应用不同:由于页面的渲染不再依赖服务端,与服务端的交互都通过接口来完成,而REASTful风格的接口提倡无状态(state less),通常不使用cookie和sessi ...

  5. rsh 无秘钥登陆配置

    /etc/hosts.equiv里的主机不须要提供password就能够訪问本机./etc/host.equiv 要和~/.rhosts文件连用. [root@web-htl2-01 ~]# cat ...

  6. Nginx中配置vue，react项目地址

    如题 像以前在Nginx中配置域名解析的时候只需要在conf.d文件夹下添加对应的xx.conf文件(当然了你也可以在nginx.conf)下配置. 如果是以前的老项目只需要在配置文件中server内 ...

  7. 剑指offer面试题24-二叉搜索树的后序遍历序列

    题目: /*  * 输入一个整数数组,推断该数组是不是某二叉搜索树的兴许遍历的结果.<br/>  * 假设是则返回true,否则返回false.<br/>  * 如果输入的数组 ...

  8. 【codevs2183】匹配字符串

    KMP裸题 #include<algorithm> #include<iostream> #include<cstdlib> #include<cstring ...

  9. iOS如何查看静态库.a文件支持的cpu类型

    打开终端: 输入 lipo -info 然后将你要查看的静态库.a 文件找到,拖入 -info 后边.假设路径为A,即为 lipo -info A 回车键,然后就会看到静态库是否支持 armv7,ar ...

  10. bzoj 1046: [HAOI2007]上升序列【dp+二分】

    先从后到前做一个最长下降子序列的dp,记录f[i],我这里用的是二分(其实树状数组比较显然) 然后对于询问,超出最长上升子序列的直接输出:否则从前到后扫,f[i]>=x&&a[i ...