仿ofo单车做一个轮播效果
首先我是利用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单车做一个轮播效果的更多相关文章
- 用JQ去实现一个轮播效果
前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body> <div class="pic"> <div ...
- 小程序或者vue，解决菜单导航做做成轮播的样子
案例: 其中最重要的思路就是如何让第二次或第三次以及后面的轮播有数据: 做法大致跟轮播图做法一样,只不过我们需要进行书写样式,代码如下: <!-- 做一个轮播图navbar demo --> ...
- 为什么使用bootstrap在一个页面同时做两个轮播效果时，只有第一个有效？？
我们都知道使用bootstrap做轮播效果非常快,但是有时候一个页面会需要两个轮播:但这个时候再次使用bootstrap做轮播效果时就会失效:原因在于bootstrap的Carousel问题,只要修改 ...
- 使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
- 常见的仿Flash图片轮播效果
现在基本在很多网站上都能看到轮播效果,虽然有点烂大街的赶脚,但是这个效果确实很好看,很时尚,今天分享下代码相对较少的轮播框架,望采纳 . ①向左滑动: 思路: 将几个图片用分别用几个 li 包住,并且 ...
- css3关键帧动画实现轮播效果
实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...
- js的轮播效果
图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...
- JS实现焦点图轮播效果
大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...
- jQuery实现轮播效果(一) - 基础
前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...
随机推荐
- java编程思想-复用类
/* 一个文件中只能有一个public类 并且此public类必须与文件名相同 */ class WaterSource { private String s; WaterSource() { Sys ...
- [GraphQL] Query Local and Remote Data in Apollo Link State
In this lesson, you will learn how to query local and remote data in Apollo Link State in the same c ...
- Android.mk文件解析
一.一个简单的Android.mk文件例如以下: LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE := nativ ...
- Appium、selenium与Robot Framework
Robot Framework + Appium Appium-Python-Client: 与Appium Library和Appium Server的交互Appium Library通过Appii ...
- JAVA 学习 IDEA安装及破解
1.到官网下载安装包 网址:https://www.jetbrains.com/idea/download/#section=windows 选择 “”Ultimate “”这个版本点击“Downl ...
- Android学习笔记-tween动画之java实现
Android动画分为Tween动画和Frame动画,近期学习了,体tween动画,现在讲学习的心得以及相关知识介绍如下. Tween又称为补间动画,可以把对象进行缩小.放大.旋转和渐变等操作. ...
- ios34---GDC,dispatch_once
// // ViewController.m // 09-掌握-GCD常用函数 // // Created by xiaomage on 16/2/18. // Copyright © 2016年 小 ...
- "Hello world" of ML
#!/usr/bin/python import os import pandas as pd from sklearn.datasets import fetch_openml import mat ...
- 让你彻底明白JAVA中堆与栈的区别
原文地址:http://www.2cto.com/kf/201302/190704.html 简单的说: Java把内存划分成两种:一种是栈内存,一种是堆内存. 在函数中定义的一些基本类型的变量和对象 ...
- Liunx中虚拟机远程复制文件SCP命令
1.首先在虚拟机中新建 CentOSA .CentOSB 从远处复制文件到本地目录 scp -r root@192.168.1.24:/root/aa ./ 从CentosB虚拟机器上的/root/a ...