github地址

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

html很简单

  1. <body>
  2. 	  <div class="swiper-container">
  3. 	    	<div class="swiper-wrapper">
  4. 		      	<div class="swiper-slide">
  5. 		                  <img src="https://common.ofo.so/campaign/valentine/images/ditie4.png" alt="" class="swiper-item">
  6. 				</div>
  7. 		      	<div class="swiper-slide">
  8. 		                  <img src="https://common.ofo.so/campaign/valentine/images/ditie3.png" alt="" class="swiper-item">
  9. 				</div>
  10. 				<div class="swiper-slide">
  11. 		                  <img src="https://common.ofo.so/campaign/valentine/images/ditie2.png" alt="" class="swiper-item">
  12. 				</div>
  13. 				<div class="swiper-slide">
  14. 		                  <img src="https://common.ofo.so/campaign/valentine/images/ditie1.png" alt="" class="swiper-item">
  15. 				</div>
  16. 	    	</div>
  17. 		    <!-- Add Pagination -->
  18. 		    <div class="swiper-pagination"></div>
  19. 	  </div>
  20. </body>

　js　

  1. <script src="js/swiper.min.js"></script>
  2. <script>
  3.    var swiper = new Swiper('.swiper-container', {
  4.       slidesPerView: 2, //每屏显示的个数
  5.       loopedSlides: 5,   //一般与slidersPerView一起使用
  6.       centeredSlides: true,
  7.       spaceBetween: 30, //间隔距离
  8.       pagination: {
  9.         el: '.swiper-pagination',
  10.         clickable: true,
  11.       }
  12.     });
  13. </script>

　

  css部分　

  1. html, body {
  2.           position: relative;
  3.           height: 100%;
  4.         }
  5.     body {
  6.       background: #fff;
  7.       font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  8.       font-size: 14px;
  9.       color:#000;
  10.       margin:;
  11.       padding:;
  12.     }
  13.    .swiper-container {
  14.       width: 100%;
  15.       height: 250px;
  16.       padding-top: 20px;
  17.       margin-top: 20px;
  18.     }
  19.     .swiper-slide {
  20.         position: relative;
  21.         top:;
  22.       text-align: center;
  23.       font-size: 18px;
  24.       background: #fff;
  25.  
  26.       /* Center slide text vertically */
  27.       display: -webkit-box;
  28.       display: -ms-flexbox;
  29.       display: -webkit-flex;
  30.       display: flex;
  31.       -webkit-box-pack: center;
  32.       -ms-flex-pack: center;
  33.       -webkit-justify-content: center;
  34.       justify-content: center;
  35.       -webkit-box-align: center;
  36.       -ms-flex-align: center;
  37.       -webkit-align-items: center;
  38.       align-items: center;
  39.       width: 60%;
  40.       height:100%;
  41.     }
  42.    .swiper-slide.swiper-slide-active{
  43.           -webkit-transform: scale(1.2);
  44.         transform: scale(1.2);
  45.         z-index:;
  46.    }
  47.    .swiper-slide.swiper-slide-prev,.swiper-slide.swiper-slide-next{
  48.         -webkit-transform: scale(0.8);
  49.         transform: scale(0.8);
  50.    }
  51.    .swiper-item{
  52.         width: 290px;
  53.         position: absolute;
  54.         top:;
  55.         left: 50%;
  56.         transform: translateX(-50%);
  57.     }

主要是改变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. Hive之Order,Sort,Cluster and Distribute By

    测试数据 create table sort_test( id int, name string ) row format delimited fields terminated by '\t' li ...

  2. SLF4J 和 Logback 在 Maven 项目中的使用方法

    原文:http://blog.csdn.net/llmmll08/article/details/70217120 本文介绍 SLF4J 和 Logback 在 Maven 项目中的用法,包括日志框架 ...

  3. Kernel与用户进程通信

    测试IPv6 ready logo   rfc 3315的时候,遇到一个问题,要求在收到ICMPv6 RA的时候,DHCPv6  Client要发Solicit消息.在平常的应用中,都是启动DHCPv ...

  4. DOM 事件类

    DOM事件的级别: DOM级别一共可以分4个级别:DOM0级.DOM1级. DOM2级 .DOM3级.而DOM事件级别分为3个级别:DOM0级事件处理.DOM2级事件处理.DOM3级事件处理 1. D ...

  5. 工作总结 js for 循环遍历 json 数据

    [{"Branch":"Bangkok","2017-01|Replenishment":"0","2017- ...

  6. Cg入门20：Fragment shader - 片段级模型动态变色（实现汽车动态换漆）

    Unity 一个面片的最大顶点数为65524,所以大于这个数,请拆分成多个面片 1.获取汽车x轴的最大值和最小值[-2.5,2.5]+R watermark/2/text/aHR0cDovL2Jsb2 ...

  7. Binary safe

    https://en.wikipedia.org/wiki/Binary-safe A binary-safe function is one that treats its input as a r ...

  8. Swing的Look And Feel机制研究

    首先,参考了一下这篇文章 里面提到需要自己Override L&F的initClassDefaults方法,但是查看了一下NimbusLookAndFeel, 发现它为了没有实现initCla ...

  9. input keyevent发送按键值【转】

    本文转载自:http://blog.csdn.net/moyu123456789/article/details/71209893 1.adb shell进入android设备,执行命令input k ...

  10. APDU命令的结构和处理【转】

    本文转载自:http://blog.csdn.net/yonghenzhita/article/details/36402525 版权声明:本文为博主原创文章,未经博主允许不得转载. 简单说,IFD( ...