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 相关文章推荐
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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
php实现的简单美国商品税计算函数
2015/07/13 PHP
Yii rules常用规则示例
2016/03/15 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
创建简单的node服务器实例(分享)
2017/06/23 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
python实现随机森林random forest的原理及方法
2017/12/21 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
如何清空Session
2015/02/23 面试题
平面设计求职信
2014/03/10 职场文书
通信工程求职信
2014/07/16 职场文书
教师暑期培训感言
2014/08/15 职场文书
网络研修随笔感言
2015/11/18 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
golang中的并发和并行
2021/05/08 Golang