<!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">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.3.1.7.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/vote-animate.css">
<style>
.body-bg{background: #ffcccb url(images/animate/slide-1.jpg) no-repeat;width: 100%;height:auto;background-size: 100%;}
</style>
<!-- Demo styles -->
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" title="1">
<div class="demo-1">
<div class="dom1-txt">
<img src="images/animate/dome-txt.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s" alt=""/>
</div>
<div class="dem1-phote">
<img src="images/animate/silde1-phone.png" class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="2s" swiper-animate-delay="0.8s"/>
</div>
</div>
</div>
<div class="swiper-slide" title="2">
<div class="demo-2">
<div class="dom2-1">
<img src="images/animate/dom2-1.png" alt="" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s"/>
</div>
<div class="dom2-2">
<img src="images/animate/dom2-2.png" alt="" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s"/>
</div>
<div class="dom2-3">
<img src="images/animate/dom2-3.jpg" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.5s"/>
</div>
<div class="dom2-4">
<img src="images/animate/dom2-4.png" alt="" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.5s"/>
</div>
<div class="dom2-5">
<img src="images/animate/dom2-5.png" alt="" class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="2.5s"/>
</div>
<div class="dom2-6">
<img src="images/animate/dom2-6.png" alt="" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="2.8s"/>
</div>
<div class="dom2-7">
<img src="images/animate/dom2-7.png" alt="" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2.5s" swiper-animate-delay="3.8s">
</div>
</div>
</div>
<div class="swiper-slide" title="3">
<div class="demo-2">
<div class="dom2-1">
<img src="images/animate/dom3-1.png" alt="" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s"/>
</div>
<div class="dom3-2">
<img src="images/animate/dom3-2.png" alt="" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.5s"/>
</div>
<div class="dom2-5 dom3-3">
<img src="images/animate/dom3-3.png" alt="" class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="2.5s"/>
</div>
<div class="dom3-4">
<img src="images/animate/dom3-4.png" alt="" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="3.5s"/>
</div>
</div>
</div>
<div class="swiper-slide" title="4">
<div class="demo-2">
<div class="dom4-1">
<img src="images/animate/dom4-1.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.2s"/>
</div>
<div class="dom4-2">
<img src="images/animate/dom4-2.png" class="ani" swiper-animate-effect="slideInUp" swiper-animate-duration="1s" swiper-animate-delay="1.2s">
</div>
<div class='dom4-3'>
<a href=""><img src='images/animate/dom4-3.png' alt='' class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2.2s" /></a>
</div>
</div>
</div>
</div>
</div>
<div class="arrow"></div>
<div class="music" id="music"></div>
<audio id="myaudio" autoplay="autoplay" loop="loop" ><source src="music/njm.mp3" type="audio/mpeg" /></audio>
<!-- Swiper JS -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/swiper.3.1.7.jquery.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<!-- Initialize Swiper -->
<script>
$(document).ready(function(){
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
direction: 'vertical',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
mousewheelControl: true,
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
});
$("#music").click(function(){
var audio = document.getElementById('myaudio');
if(audio!==null){
if(!audio.paused)
{
$(this).removeClass("music").addClass("music-off");
audio.pause();// 这个就是暂停//audio.play();// 这个就是播放
} else{
$(this).removeClass("music-off").addClass("music");
audio.play();
}
手机微信感恩专题页面wap模板_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.rar
27 浏览量
2023-08-02
12:32:40
上传
评论
收藏 1.8MB RAR 举报
手机微信感恩专题页面wap模板_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.rar （28个子文件） 
感恩 js 
swiper.3.1.7.jquery.min.js 59KB swiper.animate1.0.2.min.js 2KB jquery-1.11.1.min.js 94KB
vote-animate.html 8KB css swiper.3.1.7.min.css 14KB vote-animate.css 5KB animate.css 68KB images animate 
on.png 7KB dom4-3.png 9KB dom4-2.png 81KB dom2-6.png 39KB silde1-phone.png 848KB dom4-1.png 20KB
slide-bg.jpg 93KB dom2-1.png 4KB off.png 6KB slide-1.jpg 249KB dom2-2.png 18KB dom2-3.jpg 8KB dom2-7.png 257KB dom3-3.png 4KB up.png 6KB dom2-5.png 4KB dom3-1.png 5KB dom3-4.png 97KB dom3-2.png 58KB dom2-4.png 34KB dome-txt.png 37KB资源评论
supeerzdj
- 粉丝: 10
- 资源: 6185
