suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie ionisch, um ein unendliches Karussell und einen Klicksprung zu realisieren

Verwenden Sie ionisch, um ein unendliches Karussell und einen Klicksprung zu realisieren

一个新手
一个新手Original
2017-09-19 10:39:061577Durchsuche

Erste Seite

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="../lib/css/ionic.css">
    <script src="../lib/js/ionic.bundle.min.js"></script>
    <script>
        var app = angular.module('myApp', ['ionic']);        
        app.config(function($stateProvider,$urlRouterProvider) {/*$urlRouterProvider*/            
        $stateProvider
                .state('home', {                   
                url: '/',                   
                 templateUrl: 'home.html'                
                 })
                .state('tiaozhuan', {                    
                url: '/tiaozhuan',                   
                templateUrl: 'tiaozhuan.html'                
                })
            $urlRouterProvider.otherwise("/")
        });    </script></head><body ng-app="myApp"><ion-nav-view animation="slide-left-right">
    <!-- 中间内容 --></ion-nav-view></body></html>

第二页面<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="../lib/css/ionic.min.css">
    <script src="../lib/js/ionic.bundle.min.js"></script>
    <style>
        img{            
        width: 100%;            
        height: auto;
        }
        .btn{            
        background: green;            
        position: fixed;            
        left: 40%;            
        bottom: 100px;
        }    
    </style>
    <script>
        var my=angular.module("my",["ionic"]);    
        </script></head><body ng-app="my">
        <!-- ion-view的标题会在导航栏显示 -->
        <ion-view title="Tiaozhuan">
    <ion-content>
        <ion-nav-view animation="slide-left-right">
            <ion-slide-box auto-play="true" does-continue="true" slide-interval="1500">
                <ion-slide>
                    <p class="box blue"><img src="../img/start_page-01.jpg" height="1334" width="750"/></p>
                </ion-slide>
                <ion-slide>
                    <p class="box yellow"><img src="../img/start_page-02.jpg" height="1334" width="750"/></p>
                </ion-slide>
                <ion-slide on-slide-changed="slideHasChanged(index)">
                    <p class="box pink">
                        <img src="../img/start_page-03.jpg" height="1334" width="750"/>
                        <button class="button button-balanced btn" ui-sref="tiaozhuan">点击进入</button>
                    </p>
                </ion-slide>
            </ion-slide-box>
        </ion-nav-view>
    </ion-content></ion-view>
    </body>
    </html>
    
    
第三页面
<!-- ion-view的标题会在导航栏显示 --><ion-view title="Tiaozhuan">
 <ion-content>
 <p>asdas</p>
 </ion-content></ion-view>

Das obige ist der detaillierte Inhalt vonVerwenden Sie ionisch, um ein unendliches Karussell und einen Klicksprung zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Über die Verwendung von NPMNächster Artikel：Über die Verwendung von NPM

In Verbindung stehende Artikel

Mehr sehen