简单实现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清空file文件域的解决方案
Apr 12 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
ES6数组的扩展详解
Apr 25 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
vue控制多行文字展开收起的实现示例
Oct 11 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检查函数必传参数是否存在的实例详解
2017/08/28 PHP
如何在PHP中生成随机数
2020/06/04 PHP
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
python3.x上post发送json数据
2018/03/04 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
python代码能做成软件吗
2020/07/24 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
超市仓管员岗位职责
2014/04/07 职场文书
市场部经理岗位职责
2014/04/10 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
python实现简单的名片管理系统
2021/04/26 Python