使用JS的swiper和animate实现微场景-西藏
从swiper官网引入轮播和动画的css文件:
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
引入轮播和动画的JS文件:
<script src="js/swiper.min.js"></script>
<script src="js/animate.min.js"></script>
HTML代码:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="bg">
<img src="https://asset.eqh5.com/FiamG1wlusBAi8iAXaLv_-aH7Khd?imageMogr2/auto-orient/thumbnail/585x879%3E/quality/75/format/webp"
alt="">
</div>
<div class="bg1">
<img src="https://asset.eqh5.com/Flh2qgQSqYqob2cMnTfIt4k2hHsP?imageMogr2/auto-orient/thumbnail/585x600%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani bg2" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/FpZIOg7Gh56BtYbEOPLMgF_z0xJM?imageMogr2/auto-orient/thumbnail/506x179%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani bg3" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.2s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/FiQ3r2cbOnb_YuLOmkiG_0lXOQzu?imageMogr2/auto-orient/thumbnail/508x189%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani bg4" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/FkiOIGDcPT6WAeSsnFuVquuaKTKs?imageMogr2/auto-orient/thumbnail/504x191%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani tree1 tree" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.8s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/FsphbXZ82-4RTkXEByoE2Y0sS5TE?imageMogr2/auto-orient/thumbnail/135x140%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani tree2 tree" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/Fhga7CPDK0TmNxMXPTjxQqTFOneW?imageMogr2/auto-orient/thumbnail/138x145%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani title" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/Fjq7EETMzQ-1ZZsnjbHrV1xGfl1G?imageMogr2/auto-orient/thumbnail/239x354%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani ta" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/FnZu2NhCFm1JMv50hnfw8f8rkYau?imageMogr2/auto-orient/thumbnail/88x113%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani ball" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/FutjCMD475lnSEhvm0w8bhkj2Ag6?imageMogr2/auto-orient/thumbnail/114x55%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani line" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/FoyzjqdjZBUFDoC-LlO9sMkO2yfd?imageMogr2/auto-orient/thumbnail/129x28%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani line2" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.8s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/FoyzjqdjZBUFDoC-LlO9sMkO2yfd?imageMogr2/auto-orient/thumbnail/129x28%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani cloud" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.8s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/FpNe6cRCXhYcioaZb6LAKtVn4yaw?imageMogr2/auto-orient/thumbnail/90x45%3E/quality/75/format/webp"
alt="">
</div>
<div class="ani intro" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s"
swiper-animate-delay="0.3s">
<span>旅行社西藏/拉萨/布达拉宫旅行</span>
</div>
<div class="ani price" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s"
swiper-animate-delay="0.3s">
<span>现在报名即可立减500元</span>
</div>
<div class="ani cloud2" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s"
swiper-animate-delay="0.3s">
<img src="https://asset.eqh5.com/FsJUHvGpnUU-oTae50vgDiYy9B_b?imageMogr2/auto-orient/thumbnail/316x195%3E/quality/75/format/webp"
alt="">
</div>
<div class="music">
<img src="https://lib.eqh5.com/h5_view_2/images/bgmBtn-07b2cc.svg" alt="">
<audio loop="" src="https://asset.eqh5.com/store/3507fdbbcd190eaeebe63e010f8f84e7.mp3" autoplay=""
preload=""></audio>
</div>
</div>
</div>
</div>
html,
body {
position: relative;
height: 100%;
}
body {
background: #f3f3f3;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
position: relative;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* 这些属性用于水平对齐子元素 -webkit-box-pack 用于Safari浏览器,-ms-flex-pack 用于IE浏览器,-webkit-justify-content 用于Chrome和Safari浏览器,justify-content 用于其他浏览器。 */
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
/* 这些属性用于垂直对齐子元素。与水平对齐相似,也需要针对不同浏览器加上前缀。 */
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide div {
position: absolute;
}
.swiper-slide img {
width: 100%;
height: 100%;
}
.bg {
top: 0;
width: 100%;
}
.bg1 {
height: 76%;
width: 100%;
top: 0;
}
.bg2 {
bottom: 0;
width: 100%;
height: 24%;
z-index: 4;
}
.bg3 {
bottom: 0;
width: 100%;
height: 24%;
z-index: 5;
}
.bg4 {
width: 100%;
height: 23%;
bottom: 10%;
}
.tree {
height: 17% !important;
width: 24% !important;
}
.tree1 {
top: 0;
left: 0;
/* height: 18.5%; */
width: 17%;
height: 13%;
z-index: 9;
}
.tree2 {
top: 0;
right: 0;
width: 17%;
height: 15%;
z-index: 9;
}
.title {
width: 40%;
height: 45%;
top: 4%;
}
.ta {
top: 40%;
left: 26%;
}
.line {
top: 52%;
left: 4%;
width: 25%;
}
.ball {
top: 49%;
right: 9%;
}
.line2 {
top: 7%;
left: 49%;
width: 25%;
}
.cloud {
top: 35%;
right: 4%;
}
.intro {
top: 58%;
font-size: 20px;
color: #fff;
background-color: #000;
border-radius: 20px;
padding: 5px 20px;
}
.price {
top: 64%;
}
.cloud2 {
top: 56%;
right: 0;
width: 52%;
}
.music {
top: 3%;
right: 5%;
width: 2.5rem;
height: 2.5rem;
z-index: 99;
}
.border {
top: 5%;
width: 92%;
}
.border-line {
top: 7%;
width: 84%;
height: 78%;
border: 1px solid #000;
}
.recommed {
top: 9%;
width: 35%;
font-size: 22px;
padding: 4px 30px;
color: #fff;
border-radius: 22px;
background-color: #000;
}
.contents {
top: 13%;
width: 73%;
padding: 10px;
}
.conimg {
width: 68%;
top: 52%;
}
.conimg img {
border: 1px solid #000;
}
.cline {
border-left: 1px solid #000;
top: 16%;
height: 57%;
}
.day1 {
top: 18%;
left: 15%;
font-size: 0.8rem;
}
.day2 {
top: 25%;
left: 55%;
font-size: 0.8rem;
}
.day3 {
top: 32%;
left: 15%;
font-size: 0.8rem;
}
.day4 {
top: 40%;
left: 55%;
font-size: 0.8rem;
}
.day5 {
top: 48%;
left: 15%;
font-size: 0.8rem;
}
.day6 {
top: 56%;
left: 55%;
font-size: 0.8rem;
}
.day7 {
top: 64%;
left: 15%;
font-size: 0.8rem;
}
.day8 {
top: 70%;
left: 55%;
font-size: 0.8rem;
}
.img1 {
top: 17%;
left: 15%;
width: 35%;
height: 20%;
}
.img2 {
top: 17%;
left: 55%;
width: 35%;
height: 20%;
}
.img3 {
top: 45%;
left: 15%;
width: 35%;
height: 20%;
}
.img4 {
top: 45%;
left: 55%;
width: 35%;
height: 20%;
}
.dog {
top: 16%;
width: 70%;
}
.dog img,
.tt img {
border: 1px solid #000;
}
.pig {
top: 36%;
z-index: 55;
background-color: #000;
width: 70%;
color: #fff;
font-size: 1.2rem;
}
.cat {
top: 41%;
}
.tt {
top: 45%;
width: 70%;
}
.feng {
top: 72%;
}
.hua {
top: 68%;
z-index: 99;
background-color: #000;
width: 70%;
color: #fff;
font-size: 1.2rem;
}
<script src="js/swiper.min.js"></script>
<script src="js/animate.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical',
onInit: function (swiper) { //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function (swiper) {
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
var music = document.querySelector(".music")
var i = 1;
var bol = true;
var play = setInterval(function () {
if (bol == true) {
music.style = "transform: rotate(" + i + "deg)";
i++;
}
}, 10)
music.onclick = () => {
bol = !bol;
if (bol == false) {
clearInterval(play)
}
else {
setInterval(function () {
if (bol == true) {
music.style = "transform: rotate(" + i + "deg)";
i++;
}
}, 5)
}
}
</script>