1 Star 0 Fork 0

Saint / constantine_W

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
index.html 5.25 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
Saint 提交于 2019-12-11 18:15 . 修改加载圈为蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>婚纱照展示</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
font-size: 14px;
color:#fff;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
color:#fff;
background-size: cover;
background-position: center;
}
.gallery-top {
height: 100%;
width: 100%;
}
.swiper-slide .text {
color: #A52A2A;
text-shadow: 1px 1px 10px #F5F5F5;
left: 0px;
bottom: 0px;
font-size: 20px;
max-width: 80px;
line-height: 1;
position:absolute;
z-index:2;
}
.swiper-slide .swiper-lazy {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container gallery-top" id="swiper-top">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img data-src="images/01.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
<!-- text
<div class="text" data-swiper-parallax="-100">
<p>森系单车</p>
</div>
-->
</div>
<div class="swiper-slide">
<img data-src="images/02.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/03.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/04.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/05.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/06.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/07.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/08.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/09.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/10.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/11.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/12.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/13.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/14.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/15.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/16.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/17.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/18.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/19.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/20.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
<div class="swiper-slide">
<img data-src="images/21.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader "></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- rotate90 JS (强制图片在手机上旋转90度)-->
<script src="js/rotate90.js"></script>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
loopedSlides: 5, //looped slides should be the same
autoplay: {/*自动播放*/
delay: 6000,/*播放间隔时间ms*/
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
lazy: {//延迟加载
loadPrevNext: true,
},
});
</script>
</body>
</html>
1
https://gitee.com/constantine_W/constantine_W.git
git@gitee.com:constantine_W/constantine_W.git
constantine_W
constantine_W
constantine_W
master

搜索帮助

14c37bed 8189591 565d56ea 8189591