从零开始制作H5应用（2）——V2.0版，多页单张图片滑动，透明过渡及交互指示

关注

转载最新推荐文章于 2026-04-01 21:29:54 发布 799 阅读 AI 写同款· GEO 优化 ›

uniapp：实现中间大两边小的轮播图，幻灯片中间图片放大，两边缩小轮播效果，uniapp-swiper轮播图中间放大两边缩小示例源码替换图片（全平台兼容安卓苹果app、H5网页、微信小程序、nvue uni-app轮播图，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，轮播图-实现中间大两边小的轮播图，轮播图中间大两边小，中间大，两边小的轮播图，实现中间小，两侧大的轮播图，轮播图-实现中间大两边小的轮播图，uniapp如何实现中间大两头小的轮播效果，中间显示全部两边显示部分，uni-app实现中间放大两边缩小的轮播图_uniapp swiper 中间大，uniapp 实现3d轮播图，也就是中间的放大两边的缩小，显示中间大，两边小，展示图片或者内容，中间图片放阅读详情

从零开始制作H5应用（2）——V2.0版，多页单张图片滑动，透明过渡及交互指示，

上一次，我们制作了我们第一个H5场景应用的V1.0版，这次我们趁热打铁，在上一版的基础上对层序进行修改和扩展。

任务

1、页面数量由3张增加至9张；
2、每张页面中放入一张全屏自适应的图片；
3、修复页面过渡中的白场，并在过渡时加入页面的透明效果
4、给予用户“向上滑动“的交互提示；

分析

老规矩，拿到任务需求后，我们还是要先具体分析每一步的实现思路：

1.页面数量由3张增加至9张

这个太简单啦，就是再复制出来6个div，并给他们添加类名就可以啦：）

2、每张页面中放入一张全屏自适应的图片

这一项的关键在于自适应，可否知道 img {width:100%}的写法？

3、修复页面过渡中的白场并加入透明效果

白场问题是由于我们的切换方式是隐藏/显示，所以这一次我们改为让它移出屏幕主体，而不是隐藏，而透明效果则需要替换animation属性啦。

4、给予用户“向上滑动”的交互提示

这个问题只需要一张png图片并加一点循环的动画（animation)就可以啦！

实现

第一步，增加页面数量

index.html

<div id="pages">

        <div class="page page1">页面一</div>
        <div class="page page2">页面二</div>
        <div class="page page3">页面三</div>
        <div class="page page4">页面四</div>
        <div class="page page5">页面五</div>
        <div class="page page6">页面六</div>
        <div class="page page7">页面七</div>
        <div class="page page8">页面八</div>
        <div class="page page9">页面九</div>

    </div>

style.css

……
.page3 {
  background: yellow;
}
.page4 {
  background: #AA22FF;
}
.page5 {
  background: #ff050e;
}
.page6 {
  background: #999999;
}
.page7 {
  background: #444400;
}
.page8 {
  background: #267DB7;
}
.page9 {
  background: #ffcc80;
}
……

看看效果：

这里写图片描述

这一次，由于要调试自适应，所以我们使用了火狐浏览器自带firebug的自适应调试模式，并开启了手势操作模拟功能。

第二步：每页加入全屏自适应图片

我们在百度图片上下载了如下图片：

这里写图片描述

这些图片大多是640*900的分辨率，因为手机设备目前最大宽度是640px，至于高宽比，为了更好地自适应，越大越好。

然后添加到页面中并在css中加入自适应的样式：

index.html

 <div id="pages">

        <div class="page page1"><img src="imgs/001.jpg" alt=""/></div>
        <div class="page page2"><img src="imgs/002.jpg" alt=""/></div>
        <div class="page page3"><img src="imgs/003.jpg" alt=""/></div>
        <div class="page page4"><img src="imgs/004.jpg" alt=""/></div>
        <div class="page page5"><img src="imgs/005.jpg" alt=""/></div>
        <div class="page page6"><img src="imgs/006.jpg" alt=""/></div>
        <div class="page page7"><img src="imgs/007.jpg" alt=""/></div>
        <div class="page page8"><img src="imgs/008.jpg" alt=""/></div>
        <div class="page page9"><img src="imgs/009.jpg" alt=""/></div>

    </div>

style.css

……
.page img {
  width: 100%;
  height: 100%;
}
……

看看效果：

这里写图片描述

这里要特别注意的是，你的图片比例必须与主流设备分辨率的宽高比尽量接近，否则同时设置图片宽和高都为100%时，会有一定程度的变形。如果想避免这种情况出现，可以将图片设为外层DIV 的背景图片，并使用backgroud-size来设置图片自适应。

第三步：修复白场，加入透明效果

这里我们得重新设计一下，在初始状态下，所有的页面都是显示的，但由于所有页面都是重叠的，所以只要设置第一页的z-index为这些页面中的最大值，就可以保证第一页覆盖在所有页面之上，从而造成只显示第一页的效果。

改造后的CSS如下：

style.css


……
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  z-index: 1;
}
……
.page1 {
  background: blue;
  display: block;
  z-index: 100;
}
……
.hide {
  z-index: 1;
}
.show {
  z-index: 100;
}

再看看切换效果：

这里写图片描述

我们发现，在下一页向上滑动出现的过程中，下一层总是显示最后一个页面，而且在第一轮切换结束后，第二轮的切换就没有了过渡动画，这是为什么呢？

我们发现，我们在页面切换时除了给下一页增加show类（z-index:100）的时候，给当前页增加了一个hide类（z-index:1）,而我们发现，此时其他所有的页面也都是z-index:1,按照浏览器默认规则，z-index相同的元素，最后加载的在最上层

并且第一轮切换时给页面加的各种动画效果都没有及时清除，导致第二轮效果无法生效，所以会出现图中所示状况。

好了，知道了原因，我们再次对css和JS进行改造，并且让图片切换时显示一定的透明度渐变效果（通过改变从animation.css里调用的动画名来实现）：

style.css


……
.hide {
  z-index:99;
}
……

myfn.js

var curpage=1;
var totalpage,nextpage,lastpage,nexttotalpage;

$(document).swipeUp(function(){

//判断当前页是否为最后一页

        //获取总页数,以及总页数的+1后的序号，供后面for循环使用
    totalpage = $(".page").length;
    nexttotalpage = totalpage+1;
    //如果是最后一页，显示第一页，并移除所有page上的所有css效果类，否则显示下一页，并移除上一页的切换动画效果
    if(curpage == totalpage){
        for(var i=1; i<nexttotalpage;i++){
            $(".page"+i).removeClass("hide");
            $(".page"+i).removeClass("show");
            $(".page"+i).removeClass("pt-page-moveFromBottomFade");
        }
        $(".page1").addClass("show");
        $(".page1").addClass("pt-page-moveFromBottomFade");
        curpage =1;
    }else{
        nextpage = curpage+1;
        lastpage = curpage-1;
        $(".page"+curpage).removeClass("pt-page-moveFromBottomFade");
        $(".page"+curpage).addClass("pt-page-moveToTopFade");
        $(".page"+curpage).removeClass("show");
        $(".page"+curpage).addClass("hide");
        $(".page"+nextpage).removeClass("hide");
        $(".page"+nextpage).addClass("show");
        $(".page"+nextpage).addClass("pt-page-moveFromBottomFade");
        $(".page"+lastpage).removeClass("pt-page-moveToTopFade");
        curpage = nextpage;
    }
});

现在我们再看效果：

这里写图片描述

这次就正常了，并且切换时有了透明效果。

第四步交互指示

我们准备了下面这张png图片作为向上的指示图片：

这里写图片描述

我们将它布局到index.html最后面

index.html


……

    <div class="upicon"><img src="upicon.png" alt=""/></div>

</body>
</html>

然后在style.css里给它定义样式，记住，一定要让它的z-index大于100！因为我们之前给当前页设置的样式z-index的值是100，要保证箭头一直处在最上层。

style.css

……
.show {
  z-index: 100;
}
.upicon {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  margin-left: -30px;
  z-index: 1000;
}
.upicon img {
  width: 60px;
}

这里有一点小技巧：当position为absolute时，left:50%,margin-left:-width/2，可以保证元素水平居中。如果想垂直也居中，则使用 top:50%,margin-top:-height/2

看看效果：

这里写图片描述

最后，我们让它动起来，给它添加一个循环的上下运动的效果就可以了，我们在index.html里引入animate.css插件并给箭头元素添加animation动画：

index.html

<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>H5场景应用1.0——实现页面滑动效果</title>
    <link rel="stylesheet" href="animate.css" type="text/css"/> 
    <!--上面引入animate.css插件-->
    <link rel="stylesheet" href="animations.css" type="text/css"/>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
    <script src="touch.js"></script>
    <script src="myfn.js"></script>
</head>
<body>

    <div id="pages">

        <div class="page page1"><img src="imgs/001.jpg" alt=""/></div>
        <div class="page page2"><img src="imgs/002.jpg" alt=""/></div>
        <div class="page page3"><img src="imgs/003.jpg" alt=""/></div>
        <div class="page page4"><img src="imgs/004.jpg" alt=""/></div>
        <div class="page page5"><img src="imgs/005.jpg" alt=""/></div>
        <div class="page page6"><img src="imgs/006.jpg" alt=""/></div>
        <div class="page page7"><img src="imgs/007.jpg" alt=""/></div>
        <div class="page page8"><img src="imgs/008.jpg" alt=""/></div>
        <div class="page page9"><img src="imgs/009.jpg" alt=""/></div>

    </div>

    <div class="upicon animated infinite bounce "><img src="upicon.png" alt=""/></div>
    <!--上面应用animate的动画样式：animated infinite bounce-->

</body>
</html>