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. 通过ambari安装hadoop集群

    转载:http://www.cnblogs.com/cenyuhai/p/3295635.html 整个过程走完,问题不大,不过有一个事情要注意的是就算创建数据库的,使用localhost会报错,要使 ...

  2. maven打包插件maven-shade-plugin简单介绍

    作用: 1.可以把依赖打入jar包,然后直接使用这个jar包,从而不用担心依赖问题 2.通过设置MainClass,创建一个可以执行的jar包 3.Java工程经常会遇到第三方 Jar 包冲突,使用 ...

  3. NYOJ 题目42 一笔画问题（欧拉图）

    一笔画问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描写叙述 zyc从小就比較喜欢玩一些小游戏.当中就包含画一笔画.他想请你帮他写一个程序.推断一个图是否可以用一笔画下 ...

  4. 利用Python爬虫实现百度网盘自动化添加资源

    事情的起因是这样的,由于我想找几部经典电影欣赏欣赏,于是便向某老司机寻求资源(我备注了需要正规视频,绝对不是他想的那种资源),然后他丢给了我一个视频资源网站,说是比较有名的视频资源网站.我信以为真,便 ...

  5. IOS开发UI篇--一个支持图文混排的ActionSheet

    一.简单介绍 UIActionSheet是IOS提供给我们开发人员的底部弹出菜单控件.一般用于菜单选择.操作确认.删除确认等功能.IOS官方提供的下面方式对UIActionView进行实例化: - ( ...

  6. Start Xamarin——与Microsoft 的sales development manager的闲谈

    由于在Xamarin属于微软之前,就已经有Xamarin的账号,试用过破解版的.所以4月1号微软set Xamarin free之后.就收到了Xamarin的邀请试用邮件. 试用完了之后第二天.收到邮 ...

  7. 《软件project》——编码

       编码的目的是使用选定的程序设计语言,把模块的过程描写叙述翻译为用该语言书写的源程序. 源程序应该正确可靠.简明清晰,并且具有较高的效率.在编程的步骤中,要把软件具体设计的表达式翻译成为编程语言的 ...

  8. 一张图搞定OAuth2.0 在Office应用中打开WPF窗体并且让子窗体显示在Office应用上 彻底关闭Excle进程的几个方法 （七）Net Core项目使用Controller之二

    一张图搞定OAuth2.0   目录 1.引言 2.OAuth2.0是什么 3.OAuth2.0怎么写 回到顶部 1.引言 本篇文章是介绍OAuth2.0中最经典最常用的一种授权模式:授权码模式 非常 ...

  9. 怎样在OTN站点高速找到asm包并下载 （Oracle RAC）

    怎样在OTN站点高速找到asm包并下载 ***********************************************声明******************************* ...

  10. Android 最火框架XUtils之注解机制具体解释

    在上一篇文章Android 最火的高速开发框架XUtils中简介了xUtils的基本用法,这篇文章说一下xUtils里面的注解原理. 先来看一下xUtils里面demo的代码: @ViewInject ...