简单实现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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
vue实现表格过滤功能
Sep 27 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 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利用cookie实现访问次数统计代码
2011/05/19 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
php 猴子摘桃的算法
2017/06/20 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
json数据的列循环示例
2013/09/06 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
Python实现登录接口的示例代码
2017/07/21 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
python实现四人制扑克牌游戏
2020/04/22 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
致800米运动员广播稿
2014/02/16 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
电子工程求职信
2014/07/17 职场文书
新学期开学标语2015
2015/07/16 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
mysql分表之后如何平滑上线详解
2021/11/01 MySQL