<!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">

                    <img ng-src="{{slide.image}}" style="margin:auto;">

                    <div class="carousel-caption">

                        <h4>Slide {{$index}}</h4>

                        <p>{{slide.text}}</p>

                    </div>

                </slide>

            </carousel>

        </div>

    </div>

    <script src="../angular.js/1.3.13/angular.min.js"></script>

    <script src="../angular.js/1.4.0-beta.4/angular-animate.min.js"></script>

    <script src="../angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>

    <script src="../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: '',

                    text: 'Chocola & Vanilla',

                });

                slides.push({

                    image: '',

                    text: 'Chocola & Vanilla',

                });

                slides.push({

                    image: '',

                    text: 'Chocola & Vanilla',

                });

                slides.push({

                    image: '',

                    text: 'Chocola & Vanilla',

                });

            };

            $scope.addSlide();

        });

    </script>

</body>

</html>

注意：ui-bootstrap版本不同可能出现问题

angularjs实现首页轮播图的更多相关文章

  1. 用jQuery实现优酷首页轮播图

    ▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...

  2. 关于用jQuery知识来实现优酷首页轮播图！

    ▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...

  3. 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析

    这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...

  4. web手工项目02-注册功能输入分析，处理，输出方法-测试用例及缺陷编写-首页轮播图和购物车

    web手工项目第二天笔记 昨日回顾 搭建测试环境(WAMP,phpStudy,tpshop项目文件) 熟悉项目(四个步骤,三个来源) 项目测试流程(需求评审,测试计划与方案,测试用例设计与评审,测试执 ...

  5. 商城05——首页轮播图显示实现&Redis环境搭建&Redis实现缓存

    1.   课程计划 1.首页轮播图的展示 2.首页大广告展示流程图 3.Redis的常用命令 4.Redis的服务器搭建 (集群的搭建) 5.向业务逻辑中添加缓存 6.Jedis的使用(redis的客 ...

  6. celery介绍、架构、快速使用、包结构，celery执行异步、延迟、定时任务，django中使用celery，定时更新首页轮播图效果实现，数据加入redis缓存的坑及解决

    今日内容概要 celery介绍,架构 celery 快速使用 celery包结构 celery执行异步任务 celery执行延迟任务 celery执行定时任务 django中使用celery 定时更新 ...

  7. Android自己定义控件之应用程序首页轮播图

    如今基本上大多数的Android应用程序的首页都有轮播图.就是像下图这种(此图为转载的一篇博文中的图.拿来直接用了): 像这种组件我相信大多数的应用程序都会使用到,本文就是自己定义一个这种组件,能够动 ...

  8. 使用JS完成首页轮播图效果

    获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...

  9. Flask实战第48天：首页轮播图实现

    首页的布局如下 因为以后所有的内容都是在main-container里面,所以这里我们修改front_base.html,把{% block body%}{% endblock%}放到里面去 < ...

随机推荐

  1. cassandra 数据到Java对象的映射绑定

    类似Hibernate和MyBatis的关系映射,自动帮你将查询数据或是修改的参数进行数据映射和绑定. 支持查询后返回数据ResultSet到Java对象的映射,支持修改.删除.查询之前参数的绑定. ...

  2. Smarty模板的基础

    对前后端进行分离 如果要用的话,要从网上把smarty文件下载下来,才能用 smarty的核心是一个类 建一个php文件,写一个类文件 <?php class smarty { public $ ...

  3. 【2017-02-23】switch...case...和for循环

    1.代码简化折叠: #region 标题 ... ... #endregion 一.switch...case... 1.格式 switch(变量){ case 值:代码段;break; case 值 ...

  4. Rabbitmq集群高可用部署详细

    序言 清风万里的季节,周末本该和亲人朋友一起消遣这烂漫的花花草草,或是懒洋洋的晒个太阳听听风声鸟鸣.无奈工作使然,理想使然,我回到啦公司,敲起啦键盘,撸起啦代码,程序狗的世界一片黯然,一片黯然,愿天下 ...

  5. 数据库 t-sql 语句

    sql 高级语句  在基础语句上加上条件 条件修改: update 表名set 列明=要修改的值  where 列名 =原来的值 条件删除    删除  这个值的的一行 delete from 表名 ...

  6. Python开发【第十八篇】Web框架之Django【基础篇】

    一.简介 Python下有许多款不同的 Web 框架,Django 是重量级选手中最有代表性的一位,许多成功的网站和APP都基于 Django. Django 是一个开放源代码的Web应用框架,由 P ...

  7. 1295: [SCOI2009]最长距离

    1295: [SCOI2009]最长距离 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 960  Solved: 498[Submit][Status ...

  8. Javascript基础知识小测试（一）

    这里罗列了<你不知道的js>上卷的一些知识点以及小问题,如果你想巩固一下js那么就和我一起来看看吧. 如果你能不看书就回答上80%的问题说明你js的这一部分学得还不错,再接再厉. 作用域和 ...

  9. golang mutex互斥锁分析

    互斥锁:没有读锁写锁之分,同一时刻,只能有一个gorutine获取一把锁 数据结构设计: type Mutex struct { state int32 // 将一个32位整数拆分为 当前阻塞的gor ...

  10. spring-AOP-基于Schema切面的小例子

    前言: 如果一个项目没有 jdk 5.0 , 那就无法使用基于@AspectJ 注解 的切面. 但是使用AspectJ的表达式的大门还是可以使用的. 我们可以用java提供的Schema配置方法,来替 ...