快捷導(dǎo)航

簡單實現(xiàn)AngularJS輪播圖效果

更新時間：2020年04月10日 15:17:14 作者：期望之中

這篇文章主要教大家如何簡單實現(xiàn)AngularJS輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了AngularJS輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<head>
 <meta charset="UTF-8">
 <title>AngularJS carousel</title>
 <link  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">
  <center>
  <img ng-src="{{slide.image}}" style="width:800px;hight:800px;"></center>
  <div class="carousel-caption">
  <h4>Slide {{$index}}</h4>
  <p>{{slide.text}}</p>
  </div>
 </slide>
 </carousel>
 </div>
 </div>
 <script src="http://apps.bdimg.com/libs/angular.js/1.3.13/angular.min.js"></script>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular-animate.min.js"></script>
 <script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
 <script src="http://cdn.bootcss.com/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: 'http://www.jb.com/image/img/20161204212016_909.jpg',
  text: '允兒',
 });
 slides.push({
  image: 'http://www.jb.com/image/img/20161204212035_614.jpg',
  text: '寄語',
 });
 slides.push({
  image: 'http://www.jb.com/image/img/20170111210803_785.jpg',
  text: '寵物',
 });
 slides.push({
  image: 'http://www.jb.com/image/img/20161204212931_644.jpg',
  text: '精靈',
 });
 };
 $scope.addSlide();
 });
 </script>
</body>
</html>

注:圖片是本地的路徑

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS框架的ng-app指令與自動加載實現(xiàn)方法分析
這篇文章主要介紹了AngularJS框架的ng-app指令與自動加載實現(xiàn)方法,結(jié)合實例形式分析了ng-app指令的功能及自動加載機制的實現(xiàn)技巧,需要的朋友可以參考下
2017-01-01
Angular實現(xiàn)的敏感文字自動過濾與提示功能示例
這篇文章主要介紹了Angular實現(xiàn)的敏感文字自動過濾與提示功能,結(jié)合實例形式分析了AngularJS針對字符串的輸入判定及實時顯示相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
AngularJS輕松實現(xiàn)雙擊排序的功能
網(wǎng)上已經(jīng)有AngularJS比較多的相關(guān)教程了，那么這篇文章我們一起來看一個AngularJS雙擊排序的例子，對大家日常開發(fā)很有幫助的，有需要的可以參考借鑒。
2016-08-08
AngularJS身份驗證的方法
在客戶端使用AngularJS做身份驗證的話，推薦使用service來做，下面腳本之家小編給大家介紹AngularJS身份驗證的方法，感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
angularJS的radio實現(xiàn)單項二選一的使用方法
下面小編就為大家分享一篇angularJS的radio實現(xiàn)單項二選一的使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
AngularJS轉(zhuǎn)換響應(yīng)內(nèi)容
這篇文章主要介紹了AngularJS轉(zhuǎn)換響應(yīng)內(nèi)容的相關(guān)資料,需要的朋友可以參考下
2016-01-01
AngularJs unit-testing（單元測試）詳解
本文主要介紹AngularJs unit-testing（單元測試）的內(nèi)容，這里整理了單元測試的知識，及示例代碼，有興趣的朋友可以參考下
2016-09-09
Angularjs處理頁面閃爍的解決方法
這篇文章主要介紹了Angularjs處理頁面閃爍的解決方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
AngularJS ng-blur 指令詳解及簡單實例
本文主要介紹AngularJS ng-blur 指令，這里對ng-blur 指令的知識詳細介紹給大家，并給大家一個實例作為參考，有需要的小伙伴可以參考下
2016-07-07
Angular路由ui-router配置詳解
這篇文章主要介紹了Angular路由ui-router配置詳解，非常不錯，具有一定得參考借鑒價值，需要的朋友參考下吧
2018-08-08