<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper demo</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"> <link rel="stylesheet" href="css/hd.css"> <!-- Demo styles -->
<link rel="stylesheet" href="css/animate.min.css"></head><body><!-- Swiper --><div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide one"> <div class="top ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s"> <img src="images/002.jpg" > </div> <!--戒指区域--> <div class="bottom"><img src="images/zhuanjie4.jpg" class="ring ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="2.6s"> <img src="images/0041.jpg" class="marry ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="1.6s"> <!--时间--> <img src="images/005.jpg" class="time ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="3.6s">
</div>
<!--戒指区域结束-->
</div> <div class="swiper-slide two"> <div class="left ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s"> <img src="images/004.jpg" > </div> <div class="right ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s" > <div class="top"> <img src="images/006.jpg" > </div> <!--放文字的div 每张图片都要加时间 --> <img src="images/009.jpg" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2.5s"> <img src="" > <img src="" > <img src="" > <img src="" >
</div> <!--小风车--> <img src="" class="windmill ani"> </div> <!--第三屏--> <div class="swiper-slide three"> <div class="top ani" swiper-animate-effect=" fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s" > <img src="images/008.jpg" > </div>
<div class="bottom ani" swiper-animate-effect=" fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="2s" > <img src="images/bike.jpg" > </div>
</div> <div class="swiper-slide four"> <div class="left"> <img src="images/meinv1.jpg" > </div> </div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> <div class="swiper-slide">Slide 10</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div></div><!--音乐区域--><div id="music"> <!--<img src="images/music_gif" class="music_bg">--> <img src="images/music4.jpg" class="music_pic">
<!--背景音乐--> <!--<audio src="02.mp3" autoplay="autoplay"--> <!--loop="loop" class="aud></audio>--></div><!--音乐区域结束-->
<!--声明--><p class="copy">制作人：行者</p>
<!--声明结束-->
<!-- Swiper JS --><script src="js/swiper.min.js"></script><script src="js/swiper.animate1.0.2.min.js"></script><script src="js/hd.js"></script>
<!-- Initialize Swiper --><script> var swiper = new Swiper(‘.swiper-container‘, { pagination: ‘.swiper-pagination‘, paginationClickable: true, direction: ‘vertical‘ });</script></body></html>//js部分=================================================================
// 必要的js代码var swiper = 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动画 }
});// 结束js代码
// 音乐控制var music=document.getElementById(‘music‘);var music_bg= document.getElementsByClassName(‘music_bg‘)[0];var aud=music.getElementsByClassName(‘aud‘)[0];
// var music_gif=// ducument.getElementsByClassName(‘music_gif‘)[0];
// 定义音乐的状态变量var music_sta=1;music.onclick=function(){ if (music_sta==1){ // 让背景gif隐藏 music_bg.style.display="none"; // 停止音乐图标的旋转 music_pic.style.animation=‘none‘; // 停掉音乐 aud.pause(); music_sta=2;
}else if(music_sta==2){ music_bg.style.display=‘block‘; music.bg.style.animation=‘music 2s linear infinite‘; aud.play(); music_sta=1;
}}// 音乐控制结束//css部分=====================================
/*自带的css*/html, body { position: relative; height: 100%; font-family: "微软雅黑";}body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0;}.swiper-container { width: 100%; height: 100%;}.swiper-slide { text-align: center; font-size: 18px; background: #fff;
/* Center slide text vertically */
/*display: -webkit-box;*/ /*display: -ms-flexbox;*/ /*display: -webkit-flex;*/ /*display: flex;*/ /*-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;*/
}/*自带的css结束*/
/*音乐*/#music{
/*width: 60px;*/ /*height:60px;*/ /*border:2px solid blue;*/ position: fixed; top:10px; right:10px; z-index: 9;
}/*音符样式*/#music .music_bg{ width:60px; height: 60px; position: absolute; left:0; top:0;}
/*音乐图标样式*/.music_pic{ display: block; width:60px; height:60px; border-radius: 100%; background-size: 5% 5%; animation: music 2s linear infinite;
}@keyframes music { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); }
}/*音乐控制结束*/
/*// 第一屏*/ .swiper-slide.one{ background:url("../images/003.jpg"); background-size:100% 100%; } .swiper-slide .top{ width:70%; height:50%; border:9px solid white; margin:0 auto; margin-top:10%; overflow: hidden; }.swiper-slide .top img{ display: block; width:100%; height:100%;
}.swiper-slide.one .bottom{ width:70%; height:30%; /*border:2px solid blue;*/ /*先用margin：0 auto 对其后再用margin-top不然不行*/ margin:0 auto; margin-top:5%; position: relative;
}.swiper-slide.one .bottom .ring{ width:35%; position: absolute; left:5%; top:0;}.swiper-slide.one .bottom .marry{ width:100%; position: absolute; top:42%; left:0;}.swiper-slide.one .bottom .time{ width:50%; position: absolute; /*top:50px;*/ bottom:-15px; left:50%; transform: translateX(-50%);}p.copy{ position:fixed; bottom:0px; left:0px; width:100%; text-align: center; color: #fff; z-index: 99; font-size: 6vw;}/*第一屏结束*/
/*第二屏*/.swiper-slide.two{ background: url("../images/42.jpg"); background-size: 100% 100%; position: relative;
}.swiper-slide.two .left{ width:30%; height:20%; border:9px solid #00b0e0; position: absolute; left:5%; top: 5%; overflow: hidden; z-index:10 ;
}.swiper-slide.two .left img{ width:100%; height:100%; overflow: hidden;}.swiper-slide.two .right{ width: 60%; height:80%; /*border:9px solid red;*/ background:pink; position: absolute; right:5%; top:10%;}.swiper-slide.two .right .top{ height:60%; width:100%; overflow: hidden; margin-bottom:4%;}.swiper-slide.two .right .top img{ width: 100%;}/*right里面儿子辈的img标签*/.swiper-slide.two .right> img{ width:100%; float: left; margin-top: 2%;}/*小风车*/.swiper-slide.two .windmill{ position: absolute; right:2%; top:40%; width:30%;
}/*第二屏结束*/
/*第三屏*/.swiper-slide.three { width:100%; height:100%; background: url("../images/37.jpg"); position: relative;}
.swiper-slide.three .top{ width: 100%; height:60%; /*border:2px solid red;*/ position: relative; margin-top: 5%;}.swiper-slide.three .top img{ width:100%;}.swiper-slide.three .bottom{ width:90%; height:40%; /*border:4px solid blue ;*/ position: absolute; top:51%; left:5%; overflow: hidden;}.swiper-slide.three .bottom img{ display: block; width:100%; height:100%; /*position: absolute;*/ z-index:10;
}
/*第四屏开始*/.swiper.slide.four { width:100%; height:100%; background: url("/images/019.jpg"); position: relative;}.swiper.slide.four .left{ width:40%; height:40%; margin-top: 10%; position: relative;}.swiper.slide.four .left img{ width:100%; z-index:10; position: absolute; left:30%; top:40%;}
时间： 2024-10-15 03:47:55