swiper实现一个好看的轮播图
轮播是我们在编写页面中经常遇到的模块，所以网上也会有各种有有关轮播图的插件。今天忽然间看到了swiper上一个高颜值的轮播功能，顺便做一下分享。
首先页面在head内要先引用 swiper的css 和 js库，注意版本：3.4.2版
<link type="text/css" rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" />
<script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
html模块：
<section class="pc-banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-center none-effect">
<a href="#"><img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_banner-1.jpg" ></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_banner-1.jpg" ></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_banner-1.jpg" ></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_banner-1.jpg" ></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_banner-1.jpg" ></a>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</section>
css模块（包含了手机版本适应）：
<style>
body{
background-color: #000;
}
.pc-banner {
width: 100%;
float: left;
}
@media screen and (max-width: 668px) {
.pc-banner {
background-size: auto 100%;
}
}
.swiper-container {
width: 100%;
margin: 35px 0;
}
@media screen and (max-width: 668px) {
.swiper-container {
margin: 20px 0 15px;
}
}
.swiper-slide {
-webkit-transition: transform 1.0s;
-moz-transition: transform 1.0s;
-ms-transition: transform 1.0s;
-o-transition: transform 1.0s;
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
@media screen and (max-width: 668px) {
.swiper-slide {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
}
.swiper-slide-active,.swiper-slide-duplicate-active {
-webkit-transform: scale(1);
transform: scale(1);
}
@media screen and (max-width: 668px) {
.swiper-slide-active,.swiper-slide-duplicate-active {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
}
.none-effect {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}
.swiper-slide a {
background: #fff;
padding:10px;
display: block;
border-radius: 14px;
overflow: hidden;
}
@media screen and (min-width: 668px) {
.swiper-slide a:after {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
border: 10px solid #fff;
content: "";
width: 100%;
height: 100%;
border-radius: 20px;
}
}
.swiper-slide-active a:after {
background: none;
}
@media screen and (max-width: 668px) {
.swiper-slide a {
padding: 5px;
border-radius: 7px;
}
}
.swiper-slide img {
width: 100%;
display: block;
}
.swiper-pagination {
position: relative;
margin-bottom: 30px;
}
.swiper-pagination-bullet {
background: #5e9b95;
margin-left: 4px;
margin-right: 4px;
width: 17px;
height: 17px;
opacity: 1;
margin-bottom: 4px;
}
.swiper-pagination-bullet-active {
width: 13px;
height: 13px;
background: #FFF;
border: 6px solid #4bd4c7;
margin-bottom: 0;
}
@media screen and (max-width: 668px) {
.swiper-pagination {
position: relative;
margin-bottom: 20px;
}
.swiper-pagination-bullet {
background: #00a0e9;
margin-left: 2px;
margin-right: 2px;
width: 8px;
height: 8px;
margin-bottom: 2px;
}
.swiper-pagination-bullet-active {
width: 6px;
height: 6px;
background: #FFF;
border: 3px solid #00a0e9;
margin-bottom: 0;
}
} .button {
width: 1000px;
margin: 0 auto;
bottom: 43px;
position: relative;
}
@media screen and (max-width: 668px) {
.button {
width: 70%;
bottom: 22px;
}
}
.button div:hover {
background-color: #2f4798;
}
@media screen and (max-width: 668px) {
.button div {
width: 28px;
height: 28px;
}
}
</style>
js模块：
<script type="text/javascript">
window.onload = function() {
var swiper = new Swiper('.swiper-container',{
autoplay:3000,
speed:1000,
autoplayDisableOnInteraction : false,
loop:true,
centeredSlides : true,
slidesPerView:2,
pagination : '.swiper-pagination',
paginationClickable:true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
onInit:function(swiper){
swiper.slides[2].className="swiper-slide swiper-slide-active";//第一次打开不要动画
},
breakpoints: {
668: {
slidesPerView: 1,
}
}
});
}
</script>
具体demo如下，复制运行页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<link type="text/css" rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" />
<script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
<style>
body{
background-color: #000;
}
.pc-banner {
width: 100%;
float: left;
}
@media screen and (max-width: 668px) {
.pc-banner {
background-size: auto 100%;
}
}
.swiper-container {
width: 100%;
margin: 35px 0;
}
@media screen and (max-width: 668px) {
.swiper-container {
margin: 20px 0 15px;
}
}
.swiper-slide {
-webkit-transition: transform 1.0s;
-moz-transition: transform 1.0s;
-ms-transition: transform 1.0s;
-o-transition: transform 1.0s;
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
@media screen and (max-width: 668px) {
.swiper-slide {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
}
.swiper-slide-active,.swiper-slide-duplicate-active {
-webkit-transform: scale(1);
transform: scale(1);
}
@media screen and (max-width: 668px) {
.swiper-slide-active,.swiper-slide-duplicate-active {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
}
.none-effect {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}
.swiper-slide a {
background: #fff;
padding:10px;
display: block;
border-radius: 14px;
overflow: hidden;
}
@media screen and (min-width: 668px) {
.swiper-slide a:after {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
border: 10px solid #fff;
content: "";
width: 100%;
height: 100%;
border-radius: 20px;
}
}
.swiper-slide-active a:after {
background: none;
}
@media screen and (max-width: 668px) {
.swiper-slide a {
padding: 5px;
border-radius: 7px;
}
}
.swiper-slide img {
width: 100%;
display: block;
}
.swiper-pagination {
position: relative;
margin-bottom: 30px;
}
.swiper-pagination-bullet {
background: #5e9b95;
margin-left: 4px;
margin-right: 4px;
width: 17px;
height: 17px;
opacity: 1;
margin-bottom: 4px;
}
.swiper-pagination-bullet-active {
width: 13px;
height: 13px;
background: #FFF;
border: 6px solid #4bd4c7;
margin-bottom: 0;
}
@media screen and (max-width: 668px) { .swiper-pagination {
position: relative;
margin-bottom: 20px;
}
.swiper-pagination-bullet {
background: #00a0e9;
margin-left: 2px;
margin-right: 2px;
width: 8px;
height: 8px;
margin-bottom: 2px;
}
.swiper-pagination-bullet-active {
width: 6px;
height: 6px;
background: #FFF;
border: 3px solid #00a0e9;
margin-bottom: 0;
}
} .button {
width: 1000px;
margin: 0 auto;
bottom: 43px;
position: relative;
}
@media screen and (max-width: 668px) {
.button {
width: 70%;
bottom: 22px;
}
}
.button div:hover {
background-color: #2f4798;
}
@media screen and (max-width: 668px) {
.button div {
width: 28px;
height: 28px;
}
}
</style>
</head>
<body>
<!-- Swiper -->
<section class="pc-banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-center none-effect"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_banner-1.jpg" ></a></div>
<div class="swiper-slide"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_banner-1.jpg" ></a></div>
<div class="swiper-slide"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_banner-1.jpg" ></a></div>
<div class="swiper-slide"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_banner-1.jpg" ></a></div>
<div class="swiper-slide"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_banner-1.jpg" ></a></div>
</div>
</div>
<div class="swiper-pagination"></div>
</section> <script type="text/javascript">
window.onload = function() {
var swiper = new Swiper('.swiper-container',{
autoplay:3000,
speed:1000,
autoplayDisableOnInteraction : false,
loop:true,
centeredSlides : true,
slidesPerView:2,
pagination : '.swiper-pagination',
paginationClickable:true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
onInit:function(swiper){
swiper.slides[2].className="swiper-slide swiper-slide-active";//第一次打开不要动画
},
breakpoints: {
668: {
slidesPerView: 1,
}
}
});
}
</script> </body>
</html>
swiper实现一个好看的轮播图的更多相关文章
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- JQuery手写一个简单的轮播图
做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...
- Swiper 移动端全屏轮播图效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- swiper在一个页面多个轮播图
<script> var swiper = new Swiper('.swiper-container1', { spaceBetween: 30, centeredSlides: tru ...
- javascript编写的一个完整全方位轮播图效果
1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...
- 用原生的javascript 实现一个无限滚动的轮播图
说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...
- vue2 使用 swiper 轮播图效果
第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
随机推荐
- 转：NFS原理详解
原文:http://atong.blog.51cto.com/2393905/1343950 一.NFS介绍 1)什么是NFS 它的主要功能是通过网络让不同的机器系统之间可以彼此共享文件和目录.NFS ...
- 运用wxs制作微信小程序左滑功能和跳转，性能更优越
锲子 微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅.如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20 ...
- lua程序设计（一）
摘要:lua程序设计第二版学习笔记 脚本语言的基础语法大都比较简单,这里只列举一些lua独有,或者需要特别注意的语法点. 书中前三章的内容是一些惯常的引言,基础数据类型,运算符等内容,相对简单,这里就 ...
- SCOI2005 繁忙的都市 [Luogu P2330]
题目描述 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路口之间最多有一条 ...
- 创建 numpy.array
# 导包 import numpy as np numpy.array nparr = np.array([i for i in range(10)]) nparr # array([0, 1, 2, ...
- CSPS模拟 90
- CSPS模拟 78
大敛好稳啊..居然在模拟赛拿了540.. 有点畏惧.jpg 而我就是什么什么不行级人物了.. 真正在联赛拉开那么多分怎么追啊.. T1kmp?hash? T2 概率小到炸精时,对答案也就没贡献了 然后 ...
- 使用Typescript重构axios(七)——实现基础功能：处理响应header
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(十二)——增加参数
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- P3128 [USACO15DEC]最大流
秒切树上查分....(最近一次集训理解的东西) 但是,我敲了半小时才切掉这道题.... 我一直迷在了“边差分”和“点差分”的区别上. 所以,先说一下此题,再说一下区别. 首先,想到差分很容易. 然后, ...