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 ...
随机推荐
- Java8系列 (七) CompletableFuture异步编程
概述 Java8之前用 Future 处理异步请求, 当你需要获取任务结果时, 通常的做法是调用 get(long timeout, TimeUnit unit) 此方法会阻塞当前的线程, 如果任务 ...
- [考试反思]1019csp-s模拟测试80(a)：天遣
A组题,所以把榜粘全了. 第6名,被卡在刚好正中间. 我最近干什么伤天害理的事了?(例如说没有在skyh去上厕所的时候捶他) 上来看T1,非常贴心出题人直接把递推式子给你了,然后就和斐波数的递推一样了 ...
- spring session源码解析
模块划分 core部分代码 存储实现部分部分: jdbc实现 具体存储的实现类 例如:org.springframework.session.jdbc.JdbcOperationsSessionRep ...
- linux 安装swoole扩展方法
linux 安装swoole扩展方法 wget https://github.com/swoole/swoole-src/archive/v1.9.23.tar.gz接下去就不说了 说明下 下载swo ...
- 使用websocketpp进行websocket通信
websocketpp介绍 websocketpp是一个只有头文件的支持websocket协议的C++开源库,支持websocket客户端和服务器功能,网络传输模块基于boost::asio 提供 s ...
- 201871010114-李岩松《面向对象程序设计（java）》第十周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- arduino体感控制简单版
https://learn.sparkfun.com/tutorials/apds-9960-rgb-and-gesture-sensor-hookup-guide/all 硬件连线 关键 VCC= ...
- 服务器上传文件到oss，以及备份
公司的前端js,css是发布到oss的,所以要求后台在发布的同时先把即将要覆盖的文件备份到服务器上 步骤是先上传文件到服务器,服务器上传到oss服务器之前先备份相同文件名的文件 public clas ...
- nyoj 33-蛇形填数 (循环，模拟)
33-蛇形填数 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:15 submit:38 题目描述: 在n*n方陈里填入1,2,...,n*n,要求填 ...
- 802.11r协议理解
首先阅读了相关协议内容整理出了如下的802.11r时序图所谓基础,然后会详细理解其中的每一个步骤: