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 {
		 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>