<!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>The above is the detailed content of Use ionic to realize infinite carousel and click jump. For more information, please follow other related articles on the PHP Chinese website!
Common Linux download and installation tools
Detailed explanation of method_exists
Usage of embed tag
What to do if the embedded image is not displayed completely
What are the free crawler tools?
The difference between distributed and microservices
Data Structure and Algorithm Tutorial
Usage of distinct in SQL
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
