使用javascript实现幻灯片放映,并在用户单击按钮时创建新页面
我是javeScript的新手,我正在创建一个具有幻灯片功能的网站。我想要“当用户点击前进或后退按钮时,幻灯片URL将变为“幻灯片/img#1、幻灯片/img#2等”,但它仍然是一个单页应用程序。”有人能给出一些想法吗?多谢各位使用javascript实现幻灯片放映,并在用户单击按钮时创建新页面,javascript,jquery,html,angularjs,frontend,Javascript,Jquery,Html,Angularjs,Frontend,我是javeScript的新手,我正在创建一个具有幻灯片功能的网站。我想要“当用户点击前进或后退按钮时,幻灯片URL将变为“幻灯片/img#1、幻灯片/img#2等”,但它仍然是一个单页应用程序。”有人能给出一些想法吗?多谢各位 注:这不是家庭作业或任何学术工作,只是我的个人项目 angularjs中有一个滑块,可通过注射使用 工作插销: script.js angular.module('app', ['ui.bootstrap']); function CarouselDemoC
注:这不是家庭作业或任何学术工作,只是我的个人项目 angularjs中有一个滑块,可通过注射使用 工作插销: script.js
angular.module('app', ['ui.bootstrap']);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="app">
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
</div>
</div>
</div>
</body>
</html>
幻灯片{{$index+1}
谢谢你的建议。但我希望每次单击箭头时,它都会为新图像创建一个新页面,但逻辑相同。我发现这个网站的幻灯片有这个功能。