简单实现AngularJS轮播图效果


Posted in Javascript onApril 10, 2020

本文实例为大家分享了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">
  <center>
  <img ng-src="{{slide.image}}" style="width:800px;hight:800px;"></center>
  <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://www.jb.com/image/img/20161204212016_909.jpg',
  text: '允儿',
 });
 slides.push({
  image: 'http://www.jb.com/image/img/20161204212035_614.jpg',
  text: '寄语',
 });
 slides.push({
  image: 'http://www.jb.com/image/img/20170111210803_785.jpg',
  text: '宠物',
 });
 slides.push({
  image: 'http://www.jb.com/image/img/20161204212931_644.jpg',
  text: '精灵',
 });
 };
 $scope.addSlide();
 });
 </script>
</body>
</html>

注:图片是本地的路径

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
js创建对象的方法汇总
Jan 07 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
ie下js不执行的几种可能
Feb 28 #Javascript
jquery中绑定事件的异同
Feb 28 #Javascript
JS常见算法详解
Feb 28 #Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 #Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 #Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 #Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 #Javascript
You might like
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
python中zip()方法应用实例分析
2016/04/16 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
大整数数相乘的问题
2012/07/22 面试题
2019年分享net面试的经历和题目
2016/08/07 面试题
小松树教学反思
2014/02/11 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书