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 ...
随机推荐
- java架构之路-（MQ专题）RocketMQ从入坑到集群详解
这次我们来说说我们的RocketMQ的安装和参数配置,先来看一下我们RocketMQ的提出和应用场景吧. 早在2009年,阿里巴巴的淘宝第一次提出了双11购物狂欢节,但是在2009年,服务器无法承受到 ...
- 详解PHP中的三大经典模式
单例模式 单例模式的含义: 作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例.它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用. 单例模式 ...
- [考试反思]0816NOIP模拟测试23
210 210 210 170 还可以.暴力打满就rk4了? 但不管怎么说,总算是在改完题之后理直气壮的写考试反思了. T1是个dp,说水也不太水.(当然某脸只要A掉了一道题就要说那是水题) 我的思路 ...
- Web微信开发工具无法输入中文？官方bug
Ctrl+shift+w 重启工具就OK啦
- 误删tree命令如何恢复
误删tree命令如何恢复 考察rpm,yum的用法 一.删除tree命令,tree命令不可用 [root@centos7 ~]# which tree /usr/bin/tree [root@cent ...
- python学习-练习题
1.使用while循环输入 1 2 3 4 5 6 8 9 10 # cat lx.py #!/usr/local/bin/python3.6 #邹姣姣 #使用while循环输入 1 2 3 ...
- [LC]234题 Linked List Cycle （回文链表）（链表）
①中文题目 请判断一个链表是否为回文链表. 示例 1: 输入: 1->2输出: false示例 2: 输入: 1->2->2->1输出: true进阶:你能否用 O(n) 时间 ...
- 02. JVM运行机制
JVM运行机制 JVM启动流程 JVM基本结构 内存模型 编译和解释运行的概念 一.JVM启动流程
- SpringBoot系列教程JPA之指定id保存
原文链接: 191119-SpringBoot系列教程JPA之指定id保存 前几天有位小伙伴问了一个很有意思的问题,使用 JPA 保存数据时,即便我指定了主键 id,但是新插入的数据主键却是 mysq ...
- 【并发编程】synchronized的使用场景和原理简介
1. synchronized使用 1.1 synchronized介绍 在多线程并发编程中synchronized一直是元老级角色,很多人都会称呼它为重量级锁.但是,随着Java SE 1.6对sy ...