angularjs实现首页轮播图效果


Posted in Javascript onApril 14, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
js与applet相互调用的方法
Jun 22 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 #Javascript
微信小程序 下拉菜单简单实例
Apr 13 #Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 #Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 #Javascript
Bootstrap实现各种进度条样式详解
Apr 13 #Javascript
微信小程序 本地数据存储实例详解
Apr 13 #Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
javascript倒计时功能实现代码
2012/06/07 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python绘制规则网络图形实例
2019/12/09 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
小组口号大全
2014/06/09 职场文书
医院党员公开承诺书
2014/08/30 职场文书
实习生工作证明范本
2014/09/14 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android