angularjs實現(xiàn)首頁輪播圖效果
更新時間：2017年04月14日 08:41:46 作者：№.1飛翔
這篇文章主要為大家詳細介紹了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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了angularjs實現(xiàn)時間軸效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
我們所說的模塊，是你的AngularJS應(yīng)用程序的一個組成部分，它可以是一個Controller，也可以是一個Service服務(wù)，也可以是一個過濾器(Filter)，也可以是一個directive(指令)等等…都是屬于一個模塊,本文給大家介紹AngularJS中的module(模塊) ，感興趣的朋友一起學習吧2016-01-01
Angular懶加載動態(tài)創(chuàng)建顯示該模塊下聲明的組件
這篇文章主要為大家介紹了Angular懶加載動態(tài)創(chuàng)建顯示該模塊下聲明的組件，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
本篇文章主要介紹了Angular網(wǎng)絡(luò)請求的封裝方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
AngularJS的日期格式化有兩種形式，一種是在HTML頁面，一種是在JS代碼里，都是用到AngularJS的過濾器$filter2015-12-12
今天小編就為大家分享一篇關(guān)于Angular(5.2->6.1)升級小結(jié)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-12-12
這篇文章主要介紹了angular4+百分比進度顯示插件用法,結(jié)合實例形式分析了Angular4安裝及使用百分比進度顯示插件相關(guān)步驟與操作技巧,需要的朋友可以參考下2019-05-05
本文主要介紹 AngularJS控制器,這里對 AngularJS控制器的知識詳細講解,并提供實例代碼有需要的小伙伴可以參考下2016-07-07
Angular2里獲?。╥nput file）上傳文件的內(nèi)容的方法
這篇文章主要介紹了Angular2里獲?。╥nput file）上傳文件的內(nèi)容的方法，非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了淺析AngularJs HTTP響應(yīng)攔截器的相關(guān)資料,需要的朋友可以參考下2015-12-12