APICloud如何实现轮播图的效果

最新推荐文章于 2022-04-07 11:48:44 发布

qq_37591637

最新推荐文章于 2022-04-07 11:48:44 发布

阅读量2.3k

点赞数 1

分类专栏：手机软件h5应用制作

本文链接：https://blog.csdn.net/qq_37591637/article/details/88329427

版权

手机软件h5应用制作专栏收录该内容

43 篇文章 1 订阅

订阅专栏

js代码

一下的代码如果不知道是什么意思的可以看文档，文档里面很详细

https://docs.apicloud.com/Client-API/UI-Layout/UIScrollPicture

//轮播图
apiready = function(){//没有这个的话，就会报错api is not defined
var UIScrollPicture = api.require('UIScrollPicture');
UIScrollPicture.open({
  //轮播的区域
    rect: {
        x: 0,//距离x（左上角的距离）
        y: 0,
        w: api.winWidth,
        h: api.winHeight / 4
    },
    data: {
        paths: [
            'widget://res/img/lb0.jpg',
            'widget://res/img/lb1.jpg',
            'widget://res/img/lb2.jpg',
            'widget://res/img/lb3.jpg'
        ],
        //图形的说明文字，可有可无
        captions: ['', '', '', '']
    },
    //对文字属性的样式
    styles: {
        caption: {
            height: 35,
            color: '#E0FFFF',
            size: 13,
            bgColor: '#696969',
            position: 'bottom'
        },
        indicator: {
           dot:{
             w:20,
             h:10,
             r:5,
             margin:20
          },
            align: 'center',
            color: '#FFFFFF',
            activeColor: '#DA70D6'
        }
    },
    placeholderImg: 'widget://res/img/lb0.jpg',
    contentMode: 'scaleToFill',
    //切换的时间
    interval: 3,
    fixedOn:api.frameName,
    loop: true,
    fixed: false
}, function(ret, err) {
    if (ret) {

    } else {

    }
});
}

注意：widget：项目的意思

我的图片位置是这样的

html代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>云API</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/APICloud-rest.js"></script>
      <script type="text/javascript" src="../script/lbt.js"></script>
    <style>
        .empty {
            text-align: center;
            padding: 120px 0;
        }
    </style>
</head>
<body>
    <script>

    </script>
</body>
</html>

在手机上真机同步的效果如下