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 ...
随机推荐
- Spring AOP 知识整理
通过一个多月的 Spring AOP 的学习,掌握了 Spring AOP 的基本概念.AOP 是面向切面的编程(Aspect-Oriented Programming),是基于 OOP(面向对象的编 ...
- Python3爬虫(2)_利用urllib.urlopen发送数据获得反馈信息
一.urlopen的url参数 Agent url不仅可以是一个字符串,例如:https://baike.baidu.com/.url也可以是一个Request对象,这就需要我们先定义一个Reques ...
- 《Effective Java》 读书笔记（五）使用依赖注入取代原本的资源依赖
相信接触过Spring的同学,对于依赖注入并不陌生. 刚开始在听说这个名字的时候,一直不明白到底什么叫依赖注入,后来才发现,依赖注入一直都存在我们日常代码中,只是我们没有刻意的把它提出来,然后再取这样 ...
- SpringBoot之集成MyBatis
引入工程依赖包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- jq实现监听滚动条导致导航栏变色
1效果图 2 html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- Spring+SpringMVC整合----配置文件
1.在 web.xml 中加载 spring 的配置文件 bean.xml 底层是 Listener <!-- Spring --> <context-param> &l ...
- shell编程-基础
1．linux 下 Bash 程序开 1．1 怎样写 shell 脚本 1．使用编辑工具编辑shell 脚本,例如 vim,脚本名字一般用.sh 为后缀,不用.sh 为后缀 时编辑的内容为全黑,不会有 ...
- 解决WordPress不能发邮件，WordPress 无法发送邮件
解决WordPress不能发邮件,WordPress 无法发送邮件,不得不说WordPress这个问题真的很烦人,研究了一下午发现不能发邮件的问题无非以下几种! 1.系统本身问题,这个直接装个插件即可 ...
- thinkphp5配合datatable插件分页后端处理程序
thinkphp5配合datatable插件分页后端处理程序第一版DataTable.php v.1.0 <?php use think\Db; /** * DataTable.php. */ ...
- Look into Bitmap images
What's a Bitmap image? I'm not going to explain the differences between raster and vector images, no ...