简单实现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 相关文章推荐
JS 统计时间
Mar 09 Javascript
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
js判断两个数组相等的5种方法
May 06 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
thinkphp实现图片上传功能分享
2014/03/04 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
js实现中文实时时钟
2020/01/15 Javascript
python中字典(Dictionary)用法实例详解
2015/05/30 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python素数筛选法浅析
2018/03/19 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
大学校庆邀请函
2014/01/11 职场文书
部队万能检讨书
2014/02/20 职场文书
《影子》教学反思
2014/02/21 职场文书
民事赔偿协议书
2014/11/02 职场文书
师范生见习总结范文
2015/06/23 职场文书