swiper 幻灯片
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幻灯片