AngularJS轮播图

来源：互联网发布：郑州百知科技是干嘛的编辑：程序博客网时间：2024/05/21 13:05
<!DOCTYPE html><html ng-app="myApp" lang="en"><head>    <meta charset="UTF-8">    <title>轮播图</title>    <link href="./bootstrap.min.css" rel="stylesheet"></head><body>    <div ng-controller="CarouselDemoCtrl">        <div style="height: 550px;">            <carousel interval="myInterval" no-wrap="noWrapSlides">                <slide ng-repeat="slide in slides" active="slide.active">                    <img ng-src="{{slide.image}}" style="height:550px;width:800px;margin:0 auto">                    <div class="carousel-caption">                        <p>{{slide.text}}</p>                    </div>                </slide>            </carousel>        </div>    </div>    <script src="./angular.min.js"></script>    <script src="./angular-animate.min.js"></script>    <script src="./ui-bootstrap.min.js"></script>    <script src="./ui-bootstrap-tpls.min.js"></script>    <script>        angular.module('myApp', ['ui.bootstrap', 'ngAnimate']).controller('CarouselDemoCtrl', function ($scope) {            $scope.myInterval = 2000;            $scope.noWrapSlides = false;            var slides = $scope.slides = [];            $scope.addSlide = function () {                var newWidth = 600 + slides.length + 1;                slides.push({                    image: './1.jpg',                    text: '',                });                slides.push({                    image: './2.jpg',                    text: '',                });                slides.push({                    image: '3.jpg',                    text: '',                });                slides.push({                    image: './4.jpg',                    text: '',                });                slides.push({                    image: './5.jpg',                    text: '',                });                slides.push({                    image: './6.jpg',                    text: '',                });            };            $scope.addSlide();        });    </script></body></html><!DOCTYPE html><html ng-app="myApp" lang="en"><head>    <meta charset="UTF-8">    <title>AngularJS carousel</title>    <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"></head><body><div ng-controller="CarouselDemoCtrl">    <div style="height: 305px">        <carousel interval="myInterval" no-wrap="noWrapSlides">            <slide ng-repeat="slide in slides" active="slide.active">                <img ng-src="{{slide.image}}" style="margin:auto;">                <div class="carousel-caption">                    <h4>Slide {{$index}}</h4>                    <p>{{slide.text}}</p>                </div>            </slide>        </carousel>    </div></div><script src="http://apps.bdimg.com/libs/angular.js/1.3.13/angular.min.js"></script><script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular-animate.min.js"></script><script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script><script src="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;        var slides = $scope.slides = [];        $scope.addSlide = function () {            var newWidth = 600 + slides.length + 1;            slides.push({                image: 'http://steamcommunity-a.akamaihd.net/economy/image/U8721VM9p9C2v1o6cKJ4qEnGqnE7IoTQgZI-VTdwyTBeimAcIoxXpgK8bPeslY9pPJIvB5IWW2-452kaM8heLSRgleGArrBBwe94OfEh0bOlAlopvOVPAWe3GEKAgj6ULuupkVhtYZ0pIxzzk5gY59xSWJ95SOIxsbCuJg/1280x800',                text: 'Chocola & Vanilla',            });            slides.push({                image: 'http://steamcommunity-a.akamaihd.net/economy/image/U8721VM9p9C2v1o6cKJ4qEnGqnE7IoTQgZI-VTdwyTBeimAcIoxXpgK8bPeslY9pPJIvB5IWW2-452kaM8heLSRgleGArrBBwe94PqYvguSpXFVwv-URAD3mGBHRgzaceuqqk1BlN5IrcUvxlp8d5t8BX595SOKdq0CMpw/1280x800',                text: 'Chocola & Vanilla',            });            slides.push({                image: 'http://cdn.steamcommunity.com/economy/image/U8721VM9p9C2v1o6cKJ4qEnGqnE7IoTQgZI-VTdwyTBeimAcIoxXpgK8bPeslY9pPJIvB5IWW2-452kaM8heLSRgleGArrBBwe94PqUrgrStA1tw6OZBXGTgH0fQ1j-WeOeskQUxYcYuI02hkpgYuNZRW595SOLioa6j6w/1280x800',                text: 'Chocola & Vanilla',            });            slides.push({                image: 'http://steamcommunity-a.akamaihd.net/economy/image/U8721VM9p9C2v1o6cKJ4qEnGqnE7IoTQgZI-VTdwyTBeimAcIoxXpgK8bPeslY9pPJIvB5IWW2-452kaM8heLSRgleGArrBBwe94aqAq0-T4CVtyvLEUV2C1F0jU3mOTfrqqwlM0McZ9cBv0yckdvNxTUJ95SOId8xoS5w/1280x800',                text: 'Chocola & Vanilla',            });        };        $scope.addSlide();    });</script></body></html>
0 0