zoukankan      html  css  js  c++  java
  • 仿ofo单车做一个轮播效果

    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: 0;
          padding: 0;
        }
       .swiper-container {
          width: 100%;
          height: 250px;
          padding-top: 20px;
          margin-top: 20px;
        }
        .swiper-slide {
            position: relative;
            top:0;
          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: 1000;
       }
       .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: 0;
            left: 50%;
            transform: translateX(-50%);
        }

    主要是改变css的样式

    疾风知劲草,智者必怀仁
  • 相关阅读:
    hdu 4686 Arc of Dream
    监测系统的情况,你必须知道的两三事!
    [置顶] access函数-linux
    IE9 "CSS 因 Mime 类型不匹配而被忽略“问题
    [置顶] mkdir函数-linux
    adb 异常报错----adb server is out of date. killing... ADB server didn't ACK * failed to start daemon *
    Hbase深入学习(一) 什么是hbase
    Qt5 基于TCP传输的发送/接收文件服务器(支持多客户端)
    组队练习赛(Regionals 2012, North America
    CSS 注意事项
  • 原文地址:https://www.cnblogs.com/niuxiaoling/p/8984722.html
Copyright © 2011-2022 走看看