swipe輪播插件零基礎實用

時間 2019-12-12

標籤 swipe 插件零基礎實用简体版

原文原文鏈接

此篇博客整理了經常使用的輪播效果，適用於全部開發人員css

swipe是當下相對而言較好用的輪播插件，下面是博主整理的demo源代碼，可直接上手（備註：需本身手動swipe所需的j和css）html

此段代碼總共是有三個詳細效果，而且備註了初始化js對應的html，和使用swipe當中所須要用到的一些小的屬性控制方法！app

這裏就不一一詳解ide

博客園開通好久，也一直沒時間好好經營本身的博客，第一篇博客，不免細節的地方，排列順序方法，內容介紹確定不免存在許些問題，博主承諾之後會記錄的愈來愈優質oop

但願你們多多指教url

	<!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;
	}spa /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>