简单实现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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
vue的mixins属性详解
Mar 14 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
JS + HTML 罗盘式时钟的实现
May 21 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
MySQL授权问题总结
2007/05/06 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
JS面向对象编程详解
2016/03/06 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
python代码制作configure文件示例
2014/07/28 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
python学生信息管理系统(完整版)
2020/04/05 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
教师自我鉴定范文
2013/11/10 职场文书
弄虚作假心得体会
2014/09/10 职场文书
道歉信范文
2015/05/12 职场文书
交通事故协议书范本
2016/03/19 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
SpringBoot整合Minio文件存储
2022/04/03 Java/Android
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang