滑动

以你之姓@ 2022-06-07 11:56 167阅读 0赞

效果：

![Center][]![Center 1][]![Center 2][]

\----------------------------------------------------------------------------------------------------------

代码：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>滑动</title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/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">
            .slider {
                height: 100%;
            }
            .slider-slide {
                color: #000;
                background-color: #fff; text-align: center;
                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }
            .blue {
                background-color: blue;
            }
    
            .yellow {
                background-color: yellow;
            }
    
            .pink {
                background-color: pink;
            }
            .box{
                height:100%;
            }
            .box h1{
                position:relative; top:50%; transform:translateY(-50%);
            }
        </style>
        <style>
            body{
                position: absolute;
                width: 300px;
                height: 500px;
            }
        </style>
    </head>
    
    <body ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="SlideController">
    
    <ion-slide-box active-slide="myActiveSlide">
        <ion-slide>
            <div class="box blue"><h1>BLUE</h1></div>
        </ion-slide>
        <ion-slide>
            <div class="box yellow"><h1>YELLOW</h1></div>
        </ion-slide>
        <ion-slide>
            <div class="box pink"><h1>PINK</h1></div>
        </ion-slide>
    </ion-slide-box>
    
    </body>
    </html>

[Center]: https://img-blog.csdn.net/20171020143503801?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfNDAyNTkxOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20171020143517864?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfNDAyNTkxOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220607/bd3be59fc0f94dedb4ec454b7dba3cdf.png