案例:ionic案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<html>
2
  <head>
3
    <meta charset="utf-8">
4
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
5
    <title>W3xue教程(w3xue.com)</title>
6
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
7
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
8
    <script type="text/javascript">
9
    angular.module('ionicApp', ['ionic'])
10
11
    .controller('SlideController', function($scope) {
12
      
13
      $scope.myActiveSlide = 1;
14
      
15
    })
16
    </script>
17
    <style type="text/css">
18
    .slider {
19
      height: 100%;
20
    }
21
   .slider-slide {
22
      color: #000; 
23
      background-color: #fff; text-align: center; 
24
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }
25
    .blue {
26
      background-color: blue;
27
    }
28
29
    .yellow {
30
      background-color: yellow;
31
    }
32
33
    .pink {
34
      background-color: pink;
35
    }
36
        .box{ 
37
      height:100%; 
38
    } 
39
    .box h1{
40
      position:relative; top:50%; transform:translateY(-50%); 
41
    }
42
    </style>
43
  </head>
44
45
  <body ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="SlideController">
46
47
  <ion-slide-box active-slide="myActiveSlide">
48
    <ion-slide>