bootstrp carousel初体验 快速构建图片播放

img{
			border: 1px solid white;
			box-shadow: 2px 2px 12px #333;
			_width: expression(this.width > 600 ? "600px" : this.width + "px");
			_height: expression(this.width > 600 ? this.height * 600 / this.width + "px" : this.height + "px");
			_border: 1px solid gray;
		}
		.pointer{cursor: pointer;}

		#myCarousel img{width: 890px;}
		#myCarousel .carousel-caption{border: 1px solid white;border-top: transparent;}

 

<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/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../js/angular.min.js"></script>

 

$(function () {
		$('#myCarousel').carousel({
			interval: 5000
		});
		//setTimeout("$('#myCarousel').carousel('pause')", 2000);  // 暂停播放 // http://getbootstrap.com/2.3.2/javascript.html#carousel
	 });

	function CarouselCtrl($scope) {
		$scope.pictures = [];
		$scope.pictures.push({class: ' active', img: '51xxxxw1eh0rgce513j20xh0p0tqm.jpg', 
							  title: '徐家汇公园长廊漫步', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: '51baa38egxxxxzyu7oj20xh0p0qn4.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: '51baaxxxxgw1eh0rfw76dwj20xh0p0tog.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: '51bxxxxgw1eh0rf0simsj20xh0p0h9x.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: '51bxxxxw1eh0reydzcvj20xh0p0avz.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: '5xxxxgw1eh0rewdwpwj20xh0p0gri.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
		$scope.pictures.push({class: '', img: '51baa3xxxxpditzozj21kw16hhdt.jpg', 
							  title: '徐家汇公园长廊漫步2', content: '看那花枝招展的梅花，红艳艳的桃花，还有你的笑容'});
	}

 

评论

1 楼 Mr.Cheney 2014-12-23  

乔乐？  09年在武汉某学校上学的？ 同学呀