<!DOCTYPE html>

<html lang="en" ng-app="mainApp">

<head>

<meta charset="utf-8">

<!-- add styles -->

<link href="css/style.css" rel="stylesheet" type="text/css" />

<!-- add javascripts -->

<!-- <script src="js/jquery-2.1.3.min.js"></script> 不需要 -->

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

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

<script src="js/angular-touch.min.js"></script>

<script src="js/app.js"></script>

<title>carousel</title>

</head>

<body ng-controller="MainCtrl">

    <header>

        <a href="http://www.script-tutorials.com/demos/366/index.html" class="logo">

            <!-- <img src="data:images/logo.png" /> -->

        </a>

    </header>

    <!-- slider container -->

    <div class="container slider">

        <!-- enumerate all photos -->

        <img ng-repeat="photo in photos" class="slide" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{photo.src}}" />

        <!-- prev / next controls -->

        <a class="arrow prev" href="#" ng-click="showPrev()"></a>

        <a class="arrow next" href="#" ng-click="showNext()"></a>

        <!-- extra navigation controls -->

        <ul class="nav">

            <li ng-repeat="photo in photos" ng-class="{'active':isActive($index)}">

                <img ng-src="{{photo.src}}" alt="{{photo.desc}}" title="{{photo.desc}}" ng-click="showPhoto($index);" />

            </li>

        </ul>

    </div>

</body>

</html>
*{margin:; padding:; border: none;}

.arrow{cursor: pointer; display: block; height: 64px; margin-top: -35px; outline: medium none; position: absolute; top: 50%; width: 64px; z-index:;}

.arrow.prev{/*background-image: url("../images/prev.png");*/ left: 20px; opacity: 0.2; transition: all 0.2s linear 0s;}

.arrow.next{/*background-image: url("../images/next.png");*/ opacity: 0.2; right: 20px; transition: all 0.2s linear 0s;}

.arrow.prev:hover{opacity:;}

.arrow.next:hover{opacity:;}

.nav{bottom: -4px; display: block; height: 48px; left:; margin: 0 auto; padding: 1em 0 0.8em; position: absolute; right:; text-align: center; width: 100%; z-index:;}

.nav li{border: 5px solid #AAAAAA; border-radius: 5px; cursor: pointer; display: inline-block; height: 30px; margin: 0 8px; position: relative; width: 50px;}

.nav li.active{border: 5px solid #FFFFFF;}

.nav li img{width: 100%;}

.slider{border: 15px solid #FFFFFF; border-radius: 5px; height: 500px; margin: 20px auto; position: relative; width: 800px; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;}

.slide{position: absolute; top:; left:;}

.slide.ng-hide-add{opacity:; -webkit-transition:1s linear all; -moz-transition:1s linear all; -o-transition:1s linear all; transition:1s linear all; -webkit-transform: rotateX(50deg) rotateY(30deg); -moz-transform: rotateX(50deg) rotateY(30deg); -ms-transform: rotateX(50deg) rotateY(30deg); -o-transform: rotateX(50deg) rotateY(30deg); transform: rotateX(50deg) rotateY(30deg); -webkit-transform-origin: right top 0; -moz-transform-origin: right top 0; -ms-transform-origin: right top 0; -o-transform-origin: right top 0; transform-origin: right top 0;}

.slide.ng-hide-add.ng-hide-add-active{opacity:;}

.slide.ng-hide-remove{-webkit-transition:1s linear all; -moz-transition:1s linear all; -o-transition:1s linear all; transition:1s linear all; display:block!important; opacity:;}

.slide, .slide.ng-hide-remove.ng-hide-remove-active{opacity:;}
var mainApp = angular.module('mainApp', ['ngAnimate', 'ngTouch']);

mainApp.controller('MainCtrl', function ($scope) {

    // Set of Photos

    $scope.photos = [

        {src: '/carouseldemo/images/1.jpg', desc: 'Image 01'},

        {src: '/carouseldemo/images/2.jpg', desc: 'Image 02'},

        {src: '/carouseldemo/images/3.jpg', desc: 'Image 03'},

        {src: '/carouseldemo/images/4.jpg', desc: 'Image 04'},

        {src: '/carouseldemo/images/5.jpg', desc: 'Image 05'},

        {src: '/carouseldemo/images/6.jpg', desc: 'Image 06'}

    ];

    // initial image index

    $scope._Index = 0;

    // if a current image is the same as requested image

    $scope.isActive = function (index) {

        return $scope._Index === index;

    };

    // show prev image

    $scope.showPrev = function () {

        $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;

    };

    // show next image

    $scope.showNext = function () {

        $scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;

    };

    // show a certain image

    $scope.showPhoto = function (index) {

        $scope._Index = index;

    };

});

转载请备注。

carousel的更多相关文章

  1. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  2. Carousel 旋转画廊特效的疑难杂症

    疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...

  3. 学会用bootstrap的modal和carousel

    bootstrap框架提供了很多好用的javascript组件,可以很方便的实现常用的js效果,比如点击弹出一个div(modal).下拉菜单.旋转木马(carousel或slider),非常适合前端 ...

  4. Bootstrap 之 Carousel

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  5. DevExpress Carousel 设置水平滑动列表

    DevExpress中Carousel控件的应用 Carousel,直译为旋转木马,即旋转视图,可以做为数据的展示或者菜单项. 要实现触摸左右滑动的效果,其实是比较容易的,直接在CarouselPan ...

  6. jquery 的3D Carousel插件参数说明

    这个插件大家都很熟悉了,但是在网上找了很久找不到相关的资料,只有自己琢磨研究了一下.有些参数一眼都可以看出意思,在此我只说一下每个图片要想带一些扩展信息怎么处理. 1:首先需要创建一个ul对象,然后里 ...

  7. Bootstrap之Carousel不能自动播放的解决办法(转)

    Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...

  8. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  9. bootstrap源码分析之Carousel

    源码文件: Carousel.scssCarousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应 源码分析: 1.Html结构:主要分为以四个部分  1. ...

  10. Owl Carousel – 支持触摸的 jQuery 响应式传送带插件

    Owl Carousel 是一个 jQuery 插件,使我们能够迅速地创建响应式传送带滑块.这个插件是触摸友好的,能与几乎任何的 HTML 内容兼容使用.另外,强大的选项设置支持分页/滑动速度,启用/ ...

随机推荐

  1. Egret HTTP网络

    HTTP 请求与响应: private createGameScene():void { //HTTP 1.0 var request = new egret.HttpRequest(); reque ...

  2. 性能相差极大的SQL语句

    等价的SQL,性能差异极大,数据库里设计了一个字段存储日期时间,但不是datetime类型,用了时间戳(int 11), 下面有2个SQL语句用于查询数据库,一个是把时间戳转成date进行查询,一个是 ...

  3. BZOJ 1263 整数划分

    Description 从文件中读入一个正整数\(n\).要求将\(n\)写成若干个正整数之和,并且使这些正整数的乘积最大. 例如,\(n=13\),则当\(n\)表示为\(4+3+3+3\)(或\( ...

  4. Artem and Array

    Codeforces Round #253 (Div. 1) C:http://codeforces.com/problemset/problem/442/C 题意:给你一个序列,然后你每次可以删除一 ...

  5. 查看Redis信息和状态

    原文转自:http://redisdoc.com/server/info.html INFO [section] 以一种易于解释(parse)且易于阅读的格式,返回关于 Redis 服务器的各种信息和 ...

  6. java学习之数组（二）

    在上一节中我们讲到了数组的概念,定义,以及在内存当中的表现形式.那么这里我们来说一下,数组的另一种定义方式. 在上一篇当中我们规定是这个样子定义数组的, class ArrDemo { public ...

  7. Android的一个自定义的动态添加Dialog类

    android里面会有自己内置的Dialog的提示框,也算是比较方便的了,但是为了省点时间,我们在项目里面添加了一个自己的Dialog类,这个类实现了能够动态的添加按钮和一些提示语句或者其他的显示效果 ...

  8. poj 3281 最大流建图

    题目链接:http://poj.org/problem?id=3281 #include <cstdio> #include <cmath> #include <algo ...

  9. A - 棋盘问题

    地图看起来不太大,可以试试深搜,试一下.. 还是比较简单的搜索,竟然一下就过................... #include<stdio.h> #include<)      ...

  10. android 客户端 和 新浪微博如何打通的

    微博SDK 为开发者 提供访问oauth2.0 授权认证,并集合sso登录功能,使用第三方应用可通过 新浪微博的 登录操作 提供微博分享功能,可直接通过微博客户端分享微博 名词解释 AppKey 分配 ...