zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    C# 缓存介绍与演示(转)
    sql server 2005中表的数据与excel互相导入导出的方法
    java.exe,javac.exe,javaw.exe,jar,javadoc 区别
    C# 装箱和拆箱、理论概念(非原创)
    Maven概述(非原创)
    理解java String(非原创)
    JVM JRE JDK区别于联系(非原创)
    LINQ to SQL与LINQ to Entities场景之对照(非原创)
    J2EE系统开发环境配置
    ASP.NET MVC 拦截器(转)
  • 原文地址:https://www.cnblogs.com/a-cat/p/9100429.html
Copyright © 2011-2022 走看看