人生中的第一篇技术博客——连续多图的轮播效果
我之前从来没有搞过前端开发, 进入项目组之后被分配到做前端页面开发,感觉也挺新奇的,就下定决心认真做了。最近在用AngularJS和bootstrap做一个轮播图片的开发,参考此博主的经验,做了简单的修改,实现每次连续4张图片的轮播,现记录一下,做个纪念~:
代码块
HTML部分:
<carousel interval="myInterval" no-wrap="noWrapSlides" >
<slide ng-repeat="slide in slides" active="slide.active">
<table class="table" style="height: 210px" align="center" border="1">
<tr><td >
<img ng-src="{{slide.image1}}" ng-click="fun()">
</td>
<td>
<img ng-src="{{slide.image2}}" >
</td><td>
<img ng-src="{{slide.image3}}" >
</td><td>
<img ng-src="{{slide.image4}}" >
</td></tr>
</table>
</slide>
</carousel>
代码块
JS部分:
//对图片进行轮播展示
$scope.myInterval = 5000;//轮播图片的时间间隔
$scope.noWrapSlides = false;//是否循环轮播
$scope.active=0;//起始所显示的图片
var slides = $scope.slides = [];
$scope.addSlide = function () {
slides.push({
image1: "图片1的url",
image2: "图片2的url",
image3: "图片3的url",
image4: "图片4的url",
text:"1"
});//一次播4张图片
slides.push({
image1: "图片5的url",
image2: "图片6的url",
image3: "图片7的url",
image4: "图片8的url",
text:"2"
});
};
$scope.addSlide();
注意
引入库:angular.min.js、angular-animate.min.js、ui-bootstrap.min.js、ui-bootstrap-tpls.min.js,这些大家可以自行下载。
另外,在AngularJS的module中一定要注入’ui.bootstrap’才能生效哦~