angularjs實現(xiàn)首頁輪播圖效果
更新時間：2017年04月14日 08:41:46 作者：№.1飛翔
這篇文章主要為大家詳細(xì)介紹了angularjs實現(xiàn)首頁輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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">
<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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文給大家分享的是使用angularjs制作一個完整的表格的真實案例，結(jié)合前幾篇的內(nèi)容，把整個完整的代碼分享給大家，有需要的小伙伴可以參考下2016-01-01
這篇文章主要介紹了Angular 4.x 路由快速入門學(xué)習(xí)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
使用Angular material主題定義自己的組件庫的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關(guān)知識，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09 
這篇文章主要為大家介紹了angular中使用echarts地圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12 
這篇文章主要介紹了jquery操作angularjs對象的相關(guān)資料,需要的朋友可以參考下
2015-06-06 
這篇文章主要介紹了Angularjs驗證用戶輸入的字符串是否為日期時間,需要的朋友可以參考下
2017-06-06 
Angular使用$http.jsonp發(fā)送跨站請求的方法
這篇文章主要介紹了Angular使用$http.jsonp發(fā)送跨站請求的方法,結(jié)合實例形式分析了$http.jsonp發(fā)送跨站請求遇到的問題與相應(yīng)的解決方法,具有一定參考借鑒價值,需要的朋友可以參考下
2017-03-03 
淺析Angular 實現(xiàn)一個repeat指令的方法
這篇文章主要介紹了Angular 實現(xiàn)一個repeat指令的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-07-07 
這篇文章主要和大家一起學(xué)習(xí)Angular路由，介紹angular的$route的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12