|
@@ -0,0 +1,90 @@
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+<title>剑鱼</title>
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
+<link href="/wxrssset/style.css" rel="stylesheet">
|
|
|
+<link href="/swiper/swiper.min.css" rel="stylesheet">
|
|
|
+<link href="/swiper/animate.min.css" rel="stylesheet">
|
|
|
+<script src="/js/jquery.js"></script>
|
|
|
+<script src="/swiper/swiper.min.js"></script>
|
|
|
+<script src="/swiper/swiper.animate.min.js"></script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="swiper-container">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img id="guide-firstImg" src="/images/swordfish/guide-1.png">
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="/images/swordfish/guide-2.png">
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="/images/swordfish/guide-3.png">
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="/images/swordfish/guide-4.png">
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="/images/swordfish/guide-5.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 如果需要分页器 -->
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
+ <div class="guide-bottom">
|
|
|
+ <img src="/wxrssset/images/up.png">
|
|
|
+ <span onclick="window.location.href='/swordfish/page'">跳过引导>></span>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script type="text/javascript">
|
|
|
+$(function(){
|
|
|
+ var currentIndex = 0;
|
|
|
+ var mySwiper = new Swiper('.swiper-container', {
|
|
|
+ pagination: '.swiper-pagination',
|
|
|
+ paginationClickable: true,
|
|
|
+ loop: true,
|
|
|
+ direction: 'vertical',
|
|
|
+ touchMoveStopPropagation: false,
|
|
|
+ virtualTranslate: false,
|
|
|
+ onSlideNextStart: function(swiper){
|
|
|
+
|
|
|
+ },
|
|
|
+ onSlidePrevEnd: function(swiper){
|
|
|
+ },
|
|
|
+ onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
|
|
|
+ //swiperAnimateCache(swiper); //隐藏动画元素
|
|
|
+ //swiperAnimate(swiper); //初始化完成开始动画
|
|
|
+
|
|
|
+ },
|
|
|
+ onSlideChangeStart: function(swiper){
|
|
|
+ /*console.info(currentIndex+"--------"+swiper.activeIndex);
|
|
|
+ if(currentIndex > swiper.activeIndex){
|
|
|
+ $(swiper.slides[swiper.activeIndex]).addClass("slide-down");
|
|
|
+ }else if(currentIndex < swiper.activeIndex){
|
|
|
+ $(swiper.slides[swiper.activeIndex]).addClass("slide-up");
|
|
|
+ }
|
|
|
+ currentIndex = swiper.activeIndex-1;
|
|
|
+ $(swiper.slides[currentIndex]).one("webkitAnimationEnd",function(){
|
|
|
+ //$(this).removeClass("slide-up").removeClass("slide-down");
|
|
|
+ });*/
|
|
|
+ },
|
|
|
+ onSlideChangeEnd: function(swiper){
|
|
|
+ //swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
|
|
|
+ },
|
|
|
+ onSliderMove: function(swiper, event){
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ var imgHeight = 604;
|
|
|
+ var imgWidth = 813;
|
|
|
+ var width = document.body.clientWidth;
|
|
|
+ var height = document.body.clientHeight;
|
|
|
+ if(imgWidth > width){
|
|
|
+ var h = width / imgWidth * imgHeight;
|
|
|
+ $(".swiper-slide img").css({width: width,height: h,marginTop: -(h / 2)});
|
|
|
+ }else if(imgHeight > height){
|
|
|
+ $(".swiper-slide img").css({width: height / imgHeight * imgWidth,height: height,marginTop: -(height / 2)});
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|