脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularjs轮播图

angularjs实现首页轮播图效果

 更新时间：2017年04月14日 08:41:46   作者：№.1飛翔  
这篇文章主要为大家详细介绍了angularjs实现首页轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了angularjs轮播图展示的具体代码，供大家参考，具体内容如下

<!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="../angular.js/1.3.13/angular.min.js"></script>
  <script src="../angular.js/1.4.0-beta.4/angular-animate.min.js"></script>
  <script src="../angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
  <script src="../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: '',
          text: 'Chocola & Vanilla',
        });
        slides.push({
          image: '',
          text: 'Chocola & Vanilla',
        });
        slides.push({
          image: '',
          text: 'Chocola & Vanilla',
        });
        slides.push({
          image: '',
          text: 'Chocola & Vanilla',
        });
      };
      $scope.addSlide();
    });
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • angularjs实现时间轴效果的示例代码

    angularjs实现时间轴效果的示例代码

    本篇文章主要介绍了angularjs实现时间轴效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 深入浅析AngularJS中的module(模块)

    深入浅析AngularJS中的module(模块)

    我们所说的模块，是你的AngularJS应用程序的一个组成部分，它可以是一个Controller，也可以是一个Service服务，也可以是一个过滤器(Filter)，也可以是一个directive(指令)等等…都是属于一个模块,本文给大家介绍AngularJS中的module(模块) ，感兴趣的朋友一起学习吧
    2016-01-01
  • Angular懒加载动态创建显示该模块下声明的组件

    Angular懒加载动态创建显示该模块下声明的组件

    这篇文章主要为大家介绍了Angular懒加载动态创建显示该模块下声明的组件，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-05-05
  • Angular网络请求的封装方法

    Angular网络请求的封装方法

    本篇文章主要介绍了Angular网络请求的封装方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • AngularJS 日期格式化详解

    AngularJS 日期格式化详解

    AngularJS的日期格式化有两种形式，一种是在HTML页面，一种是在JS代码里，都是用到AngularJS的过滤器$filter
    2015-12-12
  • Angular(5.2->6.1)升级小结

    Angular(5.2->6.1)升级小结

    今天小编就为大家分享一篇关于Angular(5.2->6.1)升级小结，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2018-12-12
  • angular4+百分比进度显示插件用法示例

    angular4+百分比进度显示插件用法示例

    这篇文章主要介绍了angular4+百分比进度显示插件用法,结合实例形式分析了Angular4安装及使用百分比进度显示插件相关步骤与操作技巧,需要的朋友可以参考下
    2019-05-05
  • AngularJS入门教程之控制器详解

    AngularJS入门教程之控制器详解

    本文主要介绍 AngularJS控制器,这里对 AngularJS控制器的知识详细讲解,并提供实例代码有需要的小伙伴可以参考下
    2016-07-07
  • Angular2里获取（input file）上传文件的内容的方法

    Angular2里获取（input file）上传文件的内容的方法

    这篇文章主要介绍了Angular2里获取（input file）上传文件的内容的方法，非常具有实用价值，需要的朋友可以参考下
    2017-09-09
  • 浅析AngularJs HTTP响应拦截器

    浅析AngularJs HTTP响应拦截器

    这篇文章主要介绍了浅析AngularJs HTTP响应拦截器的相关资料,需要的朋友可以参考下
    2015-12-12

最新评论