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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
javascript每日必学之封装
Feb 23 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
javascript中如何判断类型汇总
May 14 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
php中取得文件的后缀名?
2012/02/20 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
php读取本地json文件的实例
2018/03/07 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
python学习基础之循环import及import过程
2018/04/22 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Python中dict和set的用法讲解
2019/03/28 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
小学校长先进事迹材料
2014/05/13 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
你需要掌握的20个Python常用技巧
2022/02/28 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js