首页 > > 网页制作 > Javascript >

swipe轮播插件零基础实用

2019-03-10 11:50:17来源：博客园阅读 ()

此篇博客整理了常用的轮播效果，适用于所有开发人员

swipe是当下相对而言较好用的轮播插件，下面是博主整理的demo源代码，可直接上手（备注：需自己手动swipe所需的j和css）

此段代码总共是有三个详细效果，并且备注了初始化js对应的html，和使用swipe当中所需要用到的一些小的属性控制方法！

这里就不一一详解

博客园开通很久，也一直没时间好好经营自己的博客，第一篇博客，难免细节的地方，排列顺序方法，内容介绍肯定难免存在许些问题，博主承诺以后会记录的越来越优质

希望大家多多指教

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>公用效果</title>
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	<script src="js/swiper.min.js"></script>
	<style type="text/css">
	li{
	list-style: none;
	}
	/分页器颜色样式控制/
	.swiper-pagination-bullet{
	background-color: #8a6b78 !important;
	opacity: 1 !important;
	}
	.swiper-pagination-bullet-active{
	background-color: #e7cccc !important;
	}
	/前后按钮控制样式/
	.boxleft{
	background: url(img/gift-left.png) no-repeat !important;
	background-size: 100%;
	outline: none;
	}
	.boxright{
	background: url(img/gift-right.png) no-repeat !important;
	background-size: 100%;
	outline: none;
	} /outline: none;属性可以去除点击出现边框/
	/./
	/鼠标移出隐藏按钮，移入显示按钮/
	.swiper-container .hide{
	opacity:0;
	}
	.swiper-button-next,.swiper-button-prev{
	transition:opacity .5s;
	}
	/./
	/主图下滚动/
	#box {
	width:1200px;
	margin: 0 auto;
	}
	#box .swiper-wrapper{
	margin-top:40px ;
	padding-left: 12px;
	}
	#box ul>li {
	display: inline-block;
	height: 100%;
	box-sizing: border-box;
	}
	#box ul>li>img {
	width: 170px;
	height: 115px;
	}
	/上下切换控制/
	.smlbannertop{
	width: 400px;
	}
	.smlbannertop img {
	width: 400px;
	height: 305px;
	}
	.gallery-thumbs .swiper-slide {
	height: 100%;
	opacity: 0.8;
	}
	.gallery-thumbs .swiper-slide-thumb-active {
	opacity: 1;
	}
	.smlbannerall{
	width: 1000px;
	}
	.smlbannerall img {
	width: 176px;
	height: 120px;
	margin: 20px 0px 0 8px;
	}
	</style>
	</head>
	<body>
	<!--top banner-->
	<div class="swiper-container" id="bigbanner">
	<div class="swiper-wrapper">
	<div class="swiper-slide"><img src="img/banner01.jpg"></div>
	<div class="swiper-slide"><img src="img/banner02.jpg"></div>
	<div class="swiper-slide"><img src="img/banner03.jpg"></div>
	</div>
	<!--分页器-->
	<div class="swiper-pagination bigpagination"></div>
	<!--前进后退按钮-->
	<div class="swiper-button-prev swiper-button-black bigleft"></div>
	<div class="swiper-button-next swiper-button-black bigright"></div>
	</div>


	<!--主图下滚动-->
	<div class="swiper-container" style="width: 1300px; margin: 0 auto;">
	<div class="swiper-container" id="box">
	<ul class="swiper-wrapper">
	<li class="swiper-slide">
	<img src="img/choose1.jpg" />
	</li>
	<li class="swiper-slide">
	<img src="img/choose2.jpg" />
	</li>
	<li class="swiper-slide">
	<img src="img/choose3.jpg" />
	</li>
	<li class="swiper-slide">
	<img src="img/choose4.jpg" />
	</li>
	<li class="swiper-slide">
	<img src="img/choose5.jpg" />
	</li>
	<li class="swiper-slide">
	<img src="img/choose3.jpg" />
	</li>
	</ul>
	</div>
	<div class="swiper-button-prev boxleft"></div>
	<div class="swiper-button-next boxright"></div>
	</div>

	<!--切换效果-->
	<div class="swiper-container gallery-top smlbannertop">
	<div class="swiper-wrapper">
	<div class="swiper-slide">
	<img src="img/comrecommend.jpg" />
	</div>
	<div class="swiper-slide">
	<img src="img/comrecommend.jpg" />
	</div>
	<div class="swiper-slide">
	<img src="img/comrecommend.jpg" />
	</div>
	<div class="swiper-slide">
	<img src="img/comrecommend.jpg" />
	</div>
	</div>
	</div>
	<div class="swiper-container gallery-thumbs smlbannerall">
	<ul class="swiper-wrapper">
	<li class="swiper-slide">
	<img src="img/comrecommend01.jpg" />
	</li>
	<li class="swiper-slide">
	<img src="img/comrecommend02.jpg" />
	</li>
	<li class="swiper-slide">
	<img src="img/comrecommend03.jpg" />
	</li>
	<li class="swiper-slide">
	<img src="img/comrecommend04.jpg" />
	</li>
	</ul>
	</div>

	<script>
	//topbanner
	var mySwiper = new Swiper('#bigbanner', {
	direction: 'horizontal',
	//是否无限轮播
	loop: true,
	//切换时间
	autoplay: {
	delay: 3000,
	disableOnInteraction: true,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
	},
	//过渡时间
	speed: 1300,
	// 如果需要分页器
	pagination: {
	el: '.bigpagination',
	clickable :true,
	},
	// 如果需要前进后退按钮
	navigation: {
	nextEl: '.bigright',
	prevEl: '.bigleft',
	},
	//切换效果
	effect:"fade"
	})
	//鼠标移出隐藏按钮，移入显示按钮
	mySwiper.el.onmouseover=function(){
	mySwiper.navigation.$nextEl.removeClass('hide');
	mySwiper.navigation.$prevEl.removeClass('hide');
	}
	mySwiper.el.onmouseout=function(){
	mySwiper.navigation.$nextEl.addClass('hide');
	mySwiper.navigation.$prevEl.addClass('hide');
	}

	//主图下滚动box
	var swiper = new Swiper('#box', {
	//显示几个盒子
	slidesPerView: 6,
	//盒子之间的间距
	spaceBetween: 0,
	autoplayDisableOnInteraction:true,
	loop: true,
	autoplay: {
	delay: 2000
	},
	speed: 800,
	// 如果需要前进后退按钮
	navigation: {
	nextEl: '.boxright',
	prevEl: '.boxleft',
	},
	});

	//切换效果
	var galleryThumbs = new Swiper('.smlbannerall', {
	// 控制显示几个
	slidesPerView: 4,
	loop: true,
	loopedSlides: 5, //一般设置为本来slide的个数
	watchSlidesVisibility: true,
	watchSlidesProgress: true,
	});
	var galleryTop = new Swiper('.smlbannertop', {
	spaceBetween: 10,
	loop:true,
	loopedSlides: 5, //一般设置为本来slide的个数
	thumbs: {
	swiper: galleryThumbs,
	},
	});
	</script>
	</body>
	</html>