angularjs 初体验循环

最新推荐文章于 2019-11-07 18:48:51 发布

原创最新推荐文章于 2019-11-07 18:48:51 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #纵观千象 #每天进步一点点 #学习永无止境 #angularjs

js 专栏收录该内容

123 篇文章

订阅专栏

本文利用HTML、CSS和Angular创建了一个轮播图片展示系统，通过JavaScript实现轮播效果，展示了徐家汇公园的美丽风光，包括梅花、桃花等花卉，并配有详细的文字描述。

<html ng-app>


<div id="myCarousel" class="carousel slide" ng-controller="CarouselCtrl">
		  <ol class="carousel-indicators">
			<li class="pointer{{ pic.class }}" data-target="#myCarousel" data-slide-to="{{ $index }}" ng-repeat="pic in pictures"></li>
		  </ol>
		  <!-- Carousel items -->
		  <div class="carousel-inner">
			<div class="item{{ pic.class }}" ng-repeat="pic in pictures">
				<img src="{{ pic.img }}" alt />
				<div class="carousel-caption">
				  <h4>{{ pic.title }}</h4>
				  <p>{{ pic.content }}</p>
				</div>
			</div>
		  </div>
		  <!-- Carousel nav -->
		  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
		  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
		</div>

<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../js/angular.min.js"></script>

function CarouselCtrl($scope) {
		$scope.pictures = [];
		$scope.pictures.push({class: ' active', img: 'http://ww4.sinaimg.cn/mw690/51baa38egw1ehxxxx513j20xh0p0tqm.jpg', 
							  title: '徐家汇公园长廊漫步', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww4.sinaimg.cn/mw690/51baa38egw1eh0xxxxoj20xh0p0qn4.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww2.sinaimg.cn/mw690/51baa38egw1eh0rfxxxxdwj20xh0p0tog.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww4.sinaimg.cn/mw690/51baa38egw1ehxxxxmsj20xh0p0h9x.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww1.sinaimg.cn/mw690/51baa38egw1ehxxxxzcvj20xh0p0avz.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww4.sinaimg.cn/mw690/51baa38egw1eh0xxxxwpwj20xh0p0gri.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: 'http://ww2.sinaimg.cn/mw690/51baa38egxxxxditzozj21kw16hhdt.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
	}