angularjs实现首页轮播图效果

2019-11-19 16:49:47

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了angularjs轮播图展示的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html ng-app="myApp" lang="en"><head>  <meta charset="UTF-8">  <title>AngularJS carousel</title>  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"></head><body>  <div ng-controller="CarouselDemoCtrl">    <div style="height: 305px">      <carousel interval="myInterval" no-wrap="noWrapSlides">        <slide ng-repeat="slide in slides" active="slide.active">          <img ng-src="{{slide.image}}" style="margin:auto;">          <div class="carousel-caption">            <h4>Slide {{$index}}</h4>            <p>{{slide.text}}</p>          </div>        </slide>      </carousel>    </div>  </div>  <script src="../angular.js/1.3.13/angular.min.js"></script>  <script src="../angular.js/1.4.0-beta.4/angular-animate.min.js"></script>  <script src="../angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>  <script src="../angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>  <script>    angular.module('myApp', ['ui.bootstrap', 'ngAnimate']).controller('CarouselDemoCtrl', function ($scope) {　　　　　　　//轮播图轮播间隔时间      $scope.myInterval = 2000;      $scope.noWrapSlides = false;      var slides = $scope.slides = [];      $scope.addSlide = function () {        var newWidth = 600 + slides.length + 1;        slides.push({          image: '',          text: 'Chocola & Vanilla',        });        slides.push({          image: '',          text: 'Chocola & Vanilla',        });        slides.push({          image: '',          text: 'Chocola & Vanilla',        });        slides.push({          image: '',          text: 'Chocola & Vanilla',        });      };      $scope.addSlide();    });  </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue组件中点击按钮后修改输入框的状态实例代码

下一篇：如何使用bootstrap框架 bootstrap入门必看!