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 ...
随机推荐
- 货物移动BAPI：BAPI_GOODSMVT_CREATE报错提示“不能执行功能模块 MB_CREATE_GOODS_MOVEMENT”的原因
在开发过程中,我们调用BAPI:BAPI_GOODSMVT_CREATE进行货物移动生成物料凭证时,出现了报错提示:“不能执行功能模块 MB_CREATE_GOODS_MOVEMENT”,如下图所示: ...
- 暑期集训20190726 跳动(skip)
[题目描述] 福州三中的操场上有着数不尽的跳动的小朋友. 当然善于思考的你总能从中发掘出不一样的问题 福州三中的跑道是一个n个格子围成的圆形,从0~n-1编号,有m个同学,第i个同学步长为a[i], ...
- CPS Tester
将测出10s的平均cps值 在窗内点击即可 github已编译程序:https://github.com/Ice-watermelon233/cps-tester #include <bits/ ...
- CSPS_101
T1 众所周知,只要在任意三个方向上有连续五颗棋子,游戏即结束. T2 又是最短路优化dp啦. T3 神奇的期望dp.还没改出来. 改出来啦!
- Android 开源库 GitHub 托管
本文微信公众号「AndroidTraveler」首发. 背景 之前给大家写过一篇文章 Android 上传开源项目到 jcenter 实战踩坑之路,分享了上传开源项目到 jcenter 上面的一些踩坑 ...
- Selenium +Chrome浏览器如何模拟手机操作
Selenium +Chrome浏览器如何模拟手机操作 进入手机模式 打开谷歌浏览器,按F12,进入开发者模式,点击Toggle device toolbar,进入手机模式 设置Chrome的手机模式 ...
- Redis 的底层数据结构（压缩列表）
上一篇我们介绍了 redis 中的整数集合这种数据结构的实现,也谈到了,引入这种数据结构的一个很大的原因就是,在某些仅有少量整数元素的集合场景,通过整数集合既可以达到字典的效率,也能使用远少于字典的内 ...
- 分享一份关于Hadoop2.2.0集群环境搭建文档
目录 一,准备环境 三,克隆VM 四,搭建集群 五,Hadoop启动与测试 六,安装过程中遇到的问题及其解决方案 一,准备环境 PC基本配置如下: 处理器:Intel(R) Core(TM) i5-3 ...
- shell编程-基础
1．linux 下 Bash 程序开 1．1 怎样写 shell 脚本 1．使用编辑工具编辑shell 脚本,例如 vim,脚本名字一般用.sh 为后缀,不用.sh 为后缀 时编辑的内容为全黑,不会有 ...
- js在字符串中加入一段字符串
在这个功能的实现主要是slice()方法的掌握 arrayObject.slice(start,end) start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说 ...