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