轮播是我们在编写页面中经常遇到的模块,所以网上也会有各种有有关轮播图的插件。今天忽然间看到了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 { 100%; float: left; } @media screen and (max- 668px) { .pc-banner { background-size: auto 100%; } } .swiper-container { 100%; margin: 35px 0; } @media screen and (max- 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- 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- 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- 668px) { .swiper-slide a:after { position: absolute; top: 0; left: 0; display: block; box-sizing: border-box; border: 10px solid #fff; content: ""; 100%; height: 100%; border-radius: 20px; } } .swiper-slide-active a:after { background: none; } @media screen and (max- 668px) { .swiper-slide a { padding: 5px; border-radius: 7px; } } .swiper-slide img { 100%; display: block; } .swiper-pagination { position: relative; margin-bottom: 30px; } .swiper-pagination-bullet { background: #5e9b95; margin-left: 4px; margin-right: 4px; 17px; height: 17px; opacity: 1; margin-bottom: 4px; } .swiper-pagination-bullet-active { 13px; height: 13px; background: #FFF; border: 6px solid #4bd4c7; margin-bottom: 0; } @media screen and (max- 668px) { .swiper-pagination { position: relative; margin-bottom: 20px; } .swiper-pagination-bullet { background: #00a0e9; margin-left: 2px; margin-right: 2px; 8px; height: 8px; margin-bottom: 2px; } .swiper-pagination-bullet-active { 6px; height: 6px; background: #FFF; border: 3px solid #00a0e9; margin-bottom: 0; } } .button { 1000px; margin: 0 auto; bottom: 43px; position: relative; } @media screen and (max- 668px) { .button { 70%; bottom: 22px; } } .button div:hover { background-color: #2f4798; } @media screen and (max- 668px) { .button div { 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 { 100%; float: left; } @media screen and (max- 668px) { .pc-banner { background-size: auto 100%; } } .swiper-container { 100%; margin: 35px 0; } @media screen and (max- 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- 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- 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- 668px) { .swiper-slide a:after { position: absolute; top: 0; left: 0; display: block; box-sizing: border-box; border: 10px solid #fff; content: ""; 100%; height: 100%; border-radius: 20px; } } .swiper-slide-active a:after { background: none; } @media screen and (max- 668px) { .swiper-slide a { padding: 5px; border-radius: 7px; } } .swiper-slide img { 100%; display: block; } .swiper-pagination { position: relative; margin-bottom: 30px; } .swiper-pagination-bullet { background: #5e9b95; margin-left: 4px; margin-right: 4px; 17px; height: 17px; opacity: 1; margin-bottom: 4px; } .swiper-pagination-bullet-active { 13px; height: 13px; background: #FFF; border: 6px solid #4bd4c7; margin-bottom: 0; } @media screen and (max- 668px) { .swiper-pagination { position: relative; margin-bottom: 20px; } .swiper-pagination-bullet { background: #00a0e9; margin-left: 2px; margin-right: 2px; 8px; height: 8px; margin-bottom: 2px; } .swiper-pagination-bullet-active { 6px; height: 6px; background: #FFF; border: 3px solid #00a0e9; margin-bottom: 0; } } .button { 1000px; margin: 0 auto; bottom: 43px; position: relative; } @media screen and (max- 668px) { .button { 70%; bottom: 22px; } } .button div:hover { background-color: #2f4798; } @media screen and (max- 668px) { .button div { 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>