仿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>

<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的样式

转载于:https://www.cnblogs.com/niuxiaoling/p/8984722.html

仿ofo单车做一个轮播效果相关推荐

用C#做图片轮播效果
用C#做图片轮播效果老帅在C#中做图片轮播效果,不借助第三方控件,也是可以实现的.使用PictureBox作为图片展示容器就可以.但是图片列表放在什么地方,如何加载,需要考虑一下! 1 ...
用JQ去实现一个轮播效果
前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body><div class="pic"><div cl ...
最酷网学习，如何做一个轮播
这几天参考最酷网做了一个H5场景应用案例,略有收获. 最酷网上的应用案例基本上是一个套路(毕竟是自动生成),在一个<article>标签下写了多个<section>,每个sec ...
小白怎么做一个轮播图?（思路+代码）
在页面中写好结构和样式(根据情况而定) 外层用一个$(function(){})函数包裹起来,代表等页面的内容加载完成后再去执行jquery的功能代码. 获取到包裹ul,li的大盒子元素:const ...
VUE如何快速做一个轮播图
1. 第三方插件 https://github.com/surmon-china/vue-awesome-swiper npm install swiper vue-awesome-swiper -- ...
制作轮播图思路 ~ 使用JS做一个轮播图，先在脑海里捋一捋逻辑，我的思路是这样的，看图啦：
制作一个功能比较全的轮播图,应该怎么下手呢?我的思路比较中规中矩,如果不知道怎么下手的,看看我的思路吧,看完一定要着手试试哦~
用HTML5和JavaScript做一个轮播图
说明: (1)代码中四个div内的图片 " images/14.jpg " , " images/15.jpg " , " images/16.jpg ...
vue 实现无限轮播_用vue写一个轮播图效果
轮播图在网站中几乎无处不在,占用地方少,交互性好.今天就来聊聊如何用vue实现一个轮播效果. 一.原理在轮播图数组dataList中,定义一个变量currentIndex = 0表示第一张图片,默认 ...
bootstrap 两个轮播图冲突_为什么使用bootstrap在一个页面同时做两个轮播效果时，只有第一个有效？？...
我们都知道使用bootstrap做轮播效果非常快,但是有时候一个页面会需要两个轮播:但这个时候再次使用bootstrap做轮播效果时就会失效:原因在于bootstrap的Carousel问题,只要修改 ...

仿ofo单车做一个轮播效果

仿ofo单车做一个轮播效果相关推荐

最新文章

热门文章