swiper 幻灯片

最新推荐文章于 2024-07-10 17:53:31 发布
凄凉山谷的风 OL
最新推荐文章于 2024-07-10 17:53:31 发布
阅读量165
点赞数 2
文章标签： swift 开发语言 ios
嘎嘎淘
本文链接：https://blog.csdn.net/zhang804633234/article/details/139921517
版权
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>swiper全屏响应式幻灯片代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="stylesheet" href="static/css/swiper.min.css">
<style>
* {
	padding: 0;
	margin: 0;
}
	body{background-color: #252525}
.clearfix:after {
	visibility: hidden;
	display: block;
	content: "";
	height: 0;
	line-height: 0;
	clear: both;
}
.clearfix {
	zoom: 1;
}
html, body {
	position: relative;
	height: 100%;
}
body {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #000;
	margin: 0;
	padding: 0;
}
.swiper-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.gallery-top {
	padding-bottom: 12px;
	width: 100%;
}
.gallery-top .swiper-slide {
	max-width: 100%;
	max-width: 100%;
	width: auto;
	overflow: hidden;
	opacity: 0.5;
}
.gallery-top .swiper-slide img {
	max-width: 100%;
	height: 100%;
}
.gallery-top .swiper-slide-active {
	opacity: 1;
}
.gallery-thumbs {
	height: 65px;
	box-sizing: border-box;
	padding-top: 2px;
}
.gallery-thumbs .swiper-slide {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: 100%;
	overflow: hidden;
}
.gallery-thumbs .swiper-slide img {
	max-width: 100%;
	height: 100%;
}
.gallery-thumbs-box {
	position: relative;
	width: 100%;
	height: 65px;
}
.gallery-thumbs-box .swiper-container {
	margin-left: auto;
	margin-right: auto;
}
.gallery-thumbs-box .swiper-button-prev {
	background-image: url(static/images/left-small.png);
	width: 10px;
	height: 65px;
	background-size: 10px 18px;
	left: 10px;
	margin-top: 0;
	top: 0;
	outline: none;
}
.gallery-thumbs-box .swiper-button-next {
	background-image: url(static/images/next-small.png);
	width: 10px;
	height: 65px;
	background-size: 10px 18px;
	right: 10px;
	margin-top: 0;
	top: 0;
	outline: none;
}
.gallery-top-box {
	position: relative;
	width: 100%;
}
.gallery-top-box .swiper-container {
	margin-left: auto;
	margin-right: auto;
}
.gallery-top-box .swiper-button-prev {
	background-image: url(static/images/left-lg.png);
	width: 18px;
	background-size: 18px 38px;
	left: 10px;
	margin-top: 0;
	top: 50%;
	outline: none;
	transform: translate(0, -50%)
}
.gallery-top-box .swiper-button-next {
	background-image: url(static/images/next-lg.png);
	width: 18px;
	background-size: 18px 38px;
	right: 10px;
	margin-top: 0;
	top: 50%;
	outline: none;
	transform: translate(0, -50%)
}
.slideshow {
	float: right;
	margin-right: 30px;
	margin-top: 15px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center right;
	background-image: url("static/images/play.png");
	cursor: pointer;
	padding-right: 15px;
	color: #999;
	transition: all 0.3s ease
}
.pauseed {
	background-image: url("static/images/pause.png");
}
.inner_img_area:hover img{
    transform: scale(1.2);
}
.inner_img_area img{
    width: 100%;
    transition: .5s;
}
</style>

</head>
<body >



<!-- Swiper -->
<div class="inner_img_area">
	<div class="gallery-top-box">
		<div class="swiper-container gallery-top">
			<div class="swiper-wrapper">
				<div class="swiper-slide" data-id="1"> <img src="static/images/a1.png"> </div>
				<div class="swiper-slide" data-id="2"> <img src="static/images/a2.png"> </div>
				<div class="swiper-slide" data-id="3"> <img src="static/images/a3.png"> </div>
				<div class="swiper-slide" data-id="4"> <img src="static/images/a4.png"> </div>
				<div class="swiper-slide" data-id="5"> <img src="static/images/a5.png"> </div>
				<div class="swiper-slide" data-id="6"> <img src="static/images/a6.png"> </div>
				<div class="swiper-slide" data-id="7"> <img src="static/images/a1.png"> </div>
				<div class="swiper-slide" data-id="8"> <img src="static/images/a2.png"> </div>
				<div class="swiper-slide" data-id="9"> <img src="static/images/a3.png"> </div>
				<div class="swiper-slide" data-id="10"> <img src="static/images/a4.png"> </div>
				<div class="swiper-slide" data-id="11"> <img src="static/images/a5.png"> </div>
				<div class="swiper-slide" data-id="12"> <img src="static/images/a6.png"> </div>
				<div class="swiper-slide" data-id="13"> <img src="static/images/a1.png" > </div>
				<div class="swiper-slide" data-id="14"> <img src="static/images/a2.png"> </div>
				<div class="swiper-slide" data-id="15"> <img src="static/images/a3.png"> </div>
				<div class="swiper-slide" data-id="16"> <img src="static/images/a4.png"> </div>
				<div class="swiper-slide" data-id="17"> <img src="static/images/a5.png"> </div>
				<div class="swiper-slide" data-id="18"> <img src="static/images/a6.png"> </div>
				<div class="swiper-slide" data-id="19"> <img src="static/images/a1.png" > </div>
				<div class="swiper-slide" data-id="20"> <img src="static/images/a2.png"> </div>
				<div class="swiper-slide" data-id="21"> <img src="static/images/a3.png"> </div>
				<div class="swiper-slide" data-id="22"> <img src="static/images/a4.png"> </div>
				<div class="swiper-slide" data-id="23"> <img src="static/images/a5.png"> </div>
				<div class="swiper-slide" data-id="24"> <img src="static/images/a6.png"> </div>
			</div>
			<div class="swiper-scrollbar"></div>
		</div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
	<div class="gallery-thumbs-box">
		<div class="swiper-container gallery-thumbs">
			<div class="swiper-wrapper">
				<div class="swiper-slide" data-id="1"> <img src="static/images/a1.png"> </div>
				<div class="swiper-slide" data-id="2"> <img src="static/images/a2.png"> </div>
				<div class="swiper-slide" data-id="3"> <img src="static/images/a3.png"> </div>
				<div class="swiper-slide" data-id="4"> <img src="static/images/a4.png"> </div>
				<div class="swiper-slide" data-id="5"> <img src="static/images/a5.png"> </div>
				<div class="swiper-slide" data-id="6"> <img src="static/images/a6.png"> </div>
				<div class="swiper-slide" data-id="7"> <img src="static/images/a1.png"> </div>
				<div class="swiper-slide" data-id="8"> <img src="static/images/a2.png"> </div>
				<div class="swiper-slide" data-id="9"> <img src="static/images/a3.png"> </div>
				<div class="swiper-slide" data-id="10"> <img src="static/images/a4.png"> </div>
				<div class="swiper-slide" data-id="11"> <img src="static/images/a5.png"> </div>
				<div class="swiper-slide" data-id="12"> <img src="static/images/a6.png"> </div>
				<div class="swiper-slide" data-id="13"> <img src="static/images/a1.png" > </div>
				<div class="swiper-slide" data-id="14"> <img src="static/images/a2.png"> </div>
				<div class="swiper-slide" data-id="15"> <img src="static/images/a3.png"> </div>
				<div class="swiper-slide" data-id="16"> <img src="static/images/a4.png"> </div>
				<div class="swiper-slide" data-id="17"> <img src="static/images/a5.png"> </div>
				<div class="swiper-slide" data-id="18"> <img src="static/images/a6.png"> </div>
				<div class="swiper-slide" data-id="19"> <img src="static/images/a1.png" > </div>
				<div class="swiper-slide" data-id="20"> <img src="static/images/a2.png"> </div>
				<div class="swiper-slide" data-id="21"> <img src="static/images/a3.png"> </div>
				<div class="swiper-slide" data-id="22"> <img src="static/images/a4.png"> </div>
				<div class="swiper-slide" data-id="23"> <img src="static/images/a5.png"> </div>
				<div class="swiper-slide" data-id="24"> <img src="static/images/a6.png"> </div>
			</div>
		</div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
	<!-- Swiper -->
	<div class="footernav clearfix" style="height:45px;overflow:hidden;">
	  <div class="slideshow">Stop</div>
	</div>
</div>


<!-- Swiper JS --> 
<script src="static/js/jquery.min.js"></script>
<script src="static/js/swiper.min.js"></script> 
<script>
  	//图片等比例
	galleryTopHeight()
	$(window).resize(function(){
		galleryTopHeight()
	})
	
    var galleryTop = new Swiper('.gallery-top-box .gallery-top', {
	  centeredSlides: true,
	  autoplay:{
		delay:4000,
		disableOnInteraction: false 
	  },
	  slidesPerView: 'auto',
      spaceBetween: 10,
      navigation: {
        nextEl: '.gallery-top-box .swiper-button-next',
        prevEl: '.gallery-top-box .swiper-button-prev',
      },
	  scrollbar: {
        el: '.swiper-scrollbar',
        hide: false,
		draggable: true,
		dragSize:150,
      }
    });
	
	$(".slideshow").click(function(){
		if($(this).hasClass("pauseed")){
			//播放
			$(this).removeClass("pauseed")
			galleryTop.autoplay.start()
		}else{
			//暂停
			$(this).addClass("pauseed")
			galleryTop.autoplay.stop()
			
		}
	})
	
	galleryTop.scrollbar.$el.css({
		"bottom":"0px",
		"background":"none",
		"height":"5px"
	});
	galleryTop.scrollbar.$dragEl.css({
		'background':'rgba(171,171,171,171.6)'
	}); 
	galleryTop.scrollbar.updateSize();
	
    var galleryThumbs = new Swiper('.gallery-thumbs-box .gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 'auto',
      touchRatio: 0.2,
	  navigation: {
        nextEl: '.gallery-thumbs-box .swiper-button-next',
        prevEl: '.gallery-thumbs-box .swiper-button-prev',
      }
    });
	
	galleryTop.controller.control = galleryThumbs;
	
	<!--注意添加objThumbs,objTop对应的索引值1 ~ N -->
	var objThumbs = $(".gallery-thumbs .swiper-wrapper .swiper-slide");
	var objTop = $(".gallery-top .swiper-wrapper .swiper-slide");
	objThumbs.click(function(e){
		var currentId = $(this).attr("data-id");
		for(var i = 0 ; i< objTop.length; i++){
			if($(objTop[i]).attr("data-id") === currentId){
				$(objTop[i-1]).addClass("swiper-slide-prev")
				$(objTop[i-1]).siblings().removeClass("swiper-slide-prev")
				$(objTop[i]).addClass("swiper-slide-active")
				$(objTop[i]).siblings().removeClass("swiper-slide-active")
				$(objTop[i+1]).addClass("swiper-slide-next")
				$(objTop[i+1]).siblings().removeClass("swiper-slide-next")
				e.preventDefault();
				galleryTop.slideTo(i,1000, false);
			}
		}
	})
	
	function galleryTopHeight(){
		//处理图片比例
		var wh = $(window).height();
		var headernav_height = $(".headernav").height()
		var footernav_height = $(".footernav").height()
		var galleryThumbs_height = $(".gallery-thumbs").height()
		var galleryTop_height = wh - galleryThumbs_height - headernav_height - footernav_height - 22
		$(".gallery-top").css("height",galleryTop_height)
		//缩略图
		var galleryThumbs_width = $(window).width() - 60
		$(".gallery-thumbs-box .swiper-container").css("width",galleryThumbs_width)
		//大图
		var galleryTop_width = $(window).width() - 80
		$(".gallery-top-box .swiper-container").css("width",galleryTop_width)
	}

</script>

</body>
</html>
源码包swiper幻灯片