angularjs+bootstrap 写轮播效果

因为项目中有需要轮播效果,所以,百度一下,发现不少案例,但是,实际用了几个,虽然可以,但是angularjs版本太低,换成新版本的angularjs就不行啦。所以,无奈,只能自己动脑动手去写了:

1、html部分

 <div ng-bind-html="trustHtml"></div>
2、js部分

因为要用到$sce,所以要在controller里面加上

 function newIndexCtrl($scope, $rootScope, $http, $window, $cookieStore, $cookies, enums, $timeout, $element, $sce) {}

大家根据自己需求添加功能。

	$scope.Img = "";
        $http.get(enums.address + "/KnowledgeCenter/ArticleAPI/Article?keyword=&page=0&pagesize=5")
		.success(function (response) {
		$scope.Img = '<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">' +
               '<ol class="carousel-indicators">' +
               '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>' +
               '<li data-target="#carousel-example-generic" data-slide-to="1" >' +
               '</li><li data-target="#carousel-example-generic" data-slide-to="2" ></li>' +
               '<li data-target="#carousel-example-generic" data-slide-to="3" ></li>' +
               '<li data-target="#carousel-example-generic" data-slide-to="4" ></li>' +
               '</ol>' +
               '<div class="carousel-inner" role="listbox">';
		    for (var i = 0; i < response.articles.length; i++) {		       
		        if (i==0) {
		            $scope.Img += '<div class="item active">' +
                    '<img src="data:image/png;base64, ' + response.articles[i].tileImage + '" style="width:100%;height:300px" >' +
                    '<div class="carousel-caption">' +
                    '<a href="/Home/Details?' + response.articles[i].id+ '"><small>' + response.articles[i].title + '</small> </a>'+
                    '</div>'+
                    '</div>'
		        } else {
		            $scope.Img += '<div class="item">' +
                       '<img src="data:image/png;base64, ' + response.articles[i].tileImage + '" style="width:100%;height:300px" >' +
                       '<div class="carousel-caption">' +
                        '<a href="/Home/Details?' + response.articles[i].id + '"><small>' + response.articles[i].title + '</small> </a>' +
                        '</div>' +
                       '</div>'
		        }
		    }
		    $scope.Img+=  '</div>' +
                '<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">' +
                '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>' +
                '<span class="sr-only">Previous</span>' +
                '</a>' +
                '<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">' +
                '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>' +
                '<span class="sr-only">Next</span>' +
                '</a>' +
                '</div>';
		    $scope.trustHtml = $sce.trustAsHtml($scope.Img);

		})
		.error(function (data) {
		    //console.log(data);
		    $scope.busy = false;
		});



上面这一段代码是我在请求返回数据中,拼接的bootstrap中Carousel代码,然后在循环中给图片赋值。注意,在循环中有个判断,是当i=0时,添加上active。不然初次加载时,所有的图片都会显示堆叠在一起,所以,通过判断,初始加载的时候,给显示的图片添加active。另外,原点那个我是直接1、2、3、4、5直接写上去的,并没有循环赋值。此外,还有就是只有图片是在循环中写的,其他不相干的代码,都是在循环外拼接写出来。

最后拼完之后,插入并转译$scope.trustHtml = $sce.trustAsHtml($scope.Img);

前端代码也要注意别写错了。

最后效果图


如果有更好的方法,请指教。

阅读更多
换一批

没有更多推荐了,返回首页