人生中的第一篇技术博客

人生中的第一篇技术博客——连续多图的轮播效果

我之前从来没有搞过前端开发， 进入项目组之后被分配到做前端页面开发，感觉也挺新奇的，就下定决心认真做了。最近在用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’才能生效哦~

效果图

---