简单实现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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
原生JS实现拖拽功能
Dec 16 Javascript
详解Vue的sync修饰符
May 15 Vue.js
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下将XML转换为数组
2010/01/01 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
php正则修正符用法实例详解
2016/12/29 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
Python文件和目录操作详解
2015/02/08 Python
Python排序算法实例代码
2017/08/10 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
学校消防演习方案
2014/02/19 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
少先队活动总结
2014/08/29 职场文书
工作年限证明范本
2015/06/15 职场文书
小学主题班会教案
2015/08/17 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
Elasticsearch 基本查询和组合查询
2022/04/19 Python