<!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!
