當(dāng)前位置：首頁(yè) > 编程资源 > 综合教程 >内容正文

综合教程

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

發(fā)布時(shí)間：2023/12/25 综合教程 27 生活家

生活随笔收集整理的這篇文章主要介紹了 AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

原文地址：http://www.cnblogs.com/pilixiami/p/5724314.html

Carousel指令是用于圖片輪播的控件，引入ngTouch模塊后可以在移動(dòng)端使用滑動(dòng)的方式使用輪播控件。

<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <title></title>

    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
    <script>

        angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('CarouselDemoCtrl', function ($scope) {
            $scope.myInterval = 2000;
            $scope.noWrapSlides = false;
            $scope.active = 0;
            var slides = $scope.slides = [];
            var addSlide = function () {
                slides.push({
                    image: 'http://lorempixel.com/600/300',
                    text: 'Image1',
                    id: 0
                });
                slides.push({
                    image: 'http://lorempixel.com/601/300',
                    text: 'Image2',
                    id: 1
                });
            };

            addSlide();
        });
    </script>
</head>
<body>
    <div ng-controller="CarouselDemoCtrl">
        <div>
            <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
                <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                    <img ng-src="{{slide.image}}">
                    <div class="carousel-caption">
                        <h4>Slide {{slide.id}}</h4>
                        <p>{{slide.text}}</p>
                    </div>
                </uib-slide>
            </uib-carousel>
        </div>
    </div>
</body>
</html>

效果為：

uib-carousel指令可以使用的屬性有：

屬性名	默認(rèn)值	備注
active	第一個(gè)滾動(dòng)頁(yè)的索引	當(dāng)前滾動(dòng)頁(yè)的索引
interval		滾動(dòng)頁(yè)的時(shí)間間隔（毫秒）。必須為大于0的數(shù)值
no-pause	false	設(shè)置為false時(shí)，鼠標(biāo)懸停在圖片上，圖片暫停滾動(dòng)
no-transition	false	設(shè)置為false時(shí)，開(kāi)啟滾動(dòng)的動(dòng)畫(huà)
no-wrap	false	設(shè)置為false時(shí)，圖片將循環(huán)滾動(dòng)
template-url	uib/template/carousel/carousel.html	默認(rèn)的模版

uib-slide指令可以使用的屬性有：

屬性名	默認(rèn)值	備注
actual		設(shè)置一個(gè)對(duì)象，這個(gè)對(duì)象將綁定到滾動(dòng)頁(yè)的作用域上（用于自定義滾動(dòng)頁(yè)時(shí)）
index		滾動(dòng)頁(yè)的索引。必須唯一
template-url	uib/template/carousel/slide.html	默認(rèn)的模版

總結(jié)

以上是生活随笔為你收集整理的AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。