简单实现AngularJS轮播图效果
本文实例为大家分享了AngularJS轮播图的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<htmlng-app="myApp"lang="en">
<head>
<metacharset="UTF-8">
<title>AngularJScarousel</title>
<linkhref="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css"rel="stylesheet">
</head>
<body>
<divng-controller="CarouselDemoCtrl">
<divstyle="height:305px">
<carouselinterval="myInterval"no-wrap="noWrapSlides">
<slideng-repeat="slideinslides"active="slide.active">
<center>
<imgng-src="{{slide.image}}"style="width:800px;hight:800px;"></center>
<divclass="carousel-caption">
<h4>Slide{{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
</div>
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.3.13/angular.min.js"></script>
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular-animate.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/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;
varslides=$scope.slides=[];
$scope.addSlide=function(){
varnewWidth=600+slides.length+1;
slides.push({
image:'http://www.jb.com/image/img/20161204212016_909.jpg',
text:'允儿',
});
slides.push({
image:'http://www.jb.com/image/img/20161204212035_614.jpg',
text:'寄语',
});
slides.push({
image:'http://www.jb.com/image/img/20170111210803_785.jpg',
text:'宠物',
});
slides.push({
image:'http://www.jb.com/image/img/20161204212931_644.jpg',
text:'精灵',
});
};
$scope.addSlide();
});
</script>
</body>
</html>
注:图片是本地的路径
精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。