Question

我是javeScript的新手，我正在创建一个带幻灯片功能的网站。我想“当用户单击向前或向后按钮时，幻灯片显示URL将更改为”幻灯片放映/ img＃1，幻灯片放映/ img＃2等“，但它仍然是单页应用程序。”谁能提出一些想法？谢谢。

注意：这不是家庭作业或任何学术工作，而只是我的个人项目。

Answer 1

angularjs中有一个滑块，可以通过注入ui.bootstrap来使用。

工作人员： https://plnkr.co/edit/aTl515SYqSawOk6f97RM?p=preview

<强>的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>

使用javascript实现幻灯片显示并在用户单击按钮时创建新页面

1 个答案: