html滑动框ionic

最新推荐文章于 2024-06-28 06:15:28 发布

就想糊糊涂涂

最新推荐文章于 2024-06-28 06:15:28 发布

阅读量516

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/qq_45626944/article/details/109825563

版权

前端基础专栏收录该内容

25 篇文章 0 订阅

订阅专栏

ion-slide-box：
滑动框是一个包含多页容器的组件，每页滑动或拖动切换

在这里插入图片描述
下面是样例源码：

<html>

<head>
    <title>
        轮播图

    </title>
    <link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
        angular.module('ionicApp', ['ionic'])

        .controller('SlideController', function($scope) {

            $scope.myActiveSlide = 1;

        })
    </script>
    <style type="text/css">
        .control {
            position: absolute;
            left: 500px;
            top: 100px;
            width: 500px;
            height: 300px;
        }
        
        .dldl {
            width: 500px;
            height: 300px;
        }
        
        .cql {
            width: 500px;
            height: 300px;
        }
        
        .yjrzm {
            width: 500px;
            height: 300px;
        }
    </style>
</head>

<body ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="SlideController">
    <div class="control">
        <ion-slide-box active-slide="myActiveSlide">
            <ion-slide>
                <div class="dldl ">
                    <img src="../photosmusic/dldl.jpg " alt="轮播图 ">
                </div>
            </ion-slide>
            <ion-slide>
                <div class="cql ">
                    <img src="../photosmusic/cql.jpg " alt="轮播图 ">
                </div>
            </ion-slide>
            <ion-slide>
                <div class="yjrzm ">
                    <img src="../photosmusic/yjrzm.jpg " alt="轮播图 ">
                </div>
            </ion-slide>

        </ion-slide-box>
    </div>


</body>

</html>