<!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. Prime Path

    poj3126:http://poj.org/problem?id=3126 题意:给你两个数n,k,两个数都是四位数的素数.现在让你改变n的一位数,让n变成另外一个素数.然后把这个素数在改变其中的以 ...

  2. NtQuerySystemInformation的使用（提供50余种信息）

    今天,我们主要讨论的是一个函数NtQuerySystemInformation(ZwQuerySystemInformation).当然,你不要小看这么一个函数,它却为我们提供了丰富的系统信息,同时还 ...

  3. zz将 VSTO 插件部署给所有用户

    原文:zz将 VSTO 插件部署给所有用户 注:本文原作者 Misha Shneerson 是 VSTO 团队的工程师.原文可以在下列地址找到:http://blogs.msdn.com/mshnee ...

  4. struts2.0 struts.xml配置文件详解

    <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN&quo ...

  5. 查看Redis信息和状态

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

  6. Paths on a Grid

    http://poj.org/problem?id=1942 题意:一个n*m的格子,从左下角走到右上角有多少种走法,规定只能向上或向右走: 思路:解法挺水的,高中学组合数的时候老师给讲过:求C[m+ ...

  7. ZOJ 3469 Food Delivery

    题目大意: 有n个人,住在一条直线上.第i个人的坐标是Xi,街上有个外卖餐馆的位置是X,现在餐厅工作人员要给街上的每个人送饭,送完之后再回到餐厅,送饭人的速度是V,每个人有个不满意值,当这个人送餐时间 ...

  8. 【转】Android JNI编程—JNI基础

    原文网址:http://www.jianshu.com/p/aba734d5b5cd 最近看到了很多关于热补的开源项目——Depoxed(阿里).AnFix(阿里).DynamicAPK(携程)等,它 ...

  9. DP(斜率优化)：HDU 3507 Print Article

    Print Article Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)To ...

  10. 福州大学 Problem 2168 防守阵地 I

    http://acm.fzu.edu.cn/problem.php?pid=2168 最重要的是 dp[k]=dp[k-1]-ans[k-1]+x[i]*m; ans[k-1]是m个数求和.  Pro ...