<!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. 20141127 测试使用Word2013书写博客（代码高亮+公式支持）。

      PS :又经过几次测试,发现用于Word2010的高亮插件在Word2013上排版效果不是很好,慎用.不过公式编辑倒是挺方便的 测试使用Word2013书写博客. 大概一个月前,使用WindowL ...

  2. Promise 让异步更优

    每个异步方法都返回一个Promise 更优雅. then方法 每一个Promise  都有一个叫then 的方法, 接受一对callback    被解决时调用,resolve, 被拒绝   reje ...

  3. 工程师必知ZigBee技术问答精华汇总

    本文是关于ZigBee技术的一些基础知识.行业应用方面的精华汇总.希望通过本文的分析,能让大家对ZigBee技术的起源.发展.特点.前景及其在通信网络中的相关应用有全面直观的了解. 1.基础知识篇 Q ...

  4. 16.缓存（Cache）

    如果每次进入页面的时候都查询数据库生成页面内容的话,如果访问量非常大,则网站性能会非常差.而如果只有第一次访问的时候才查询数据库生成页面内容,以后都直接输出内容,则能提高系统性能,这样无论有多少人访问 ...

  5. Arrays.sort的粗略讲解

    排序算法,基本的高级语言都有一些提供.C语言有qsort()函数,C++有sort()函数,java语言有Arrays类(不是Array).用这些排序时,都可以写自己的排序规则. Java API对A ...

  6. 【HDOJ】3345 War Chess

    简单BFS.注意最后一组数据,每个初始点不考虑周围是否有敌人. /* 3345 */ #include <iostream> #include <cstdio> #includ ...

  7. VS2010中编写宏添加作者信息与函数注释

    这里所说的宏是指通过一系列键盘组合键和可以插入自定义内容.下面介绍怎么编写一个自己的宏: 1.在Visual Studio 2010中按Alt+F11打开宏IDE: 2.打开后选择添加模块: 3.在弹 ...

  8. 在ASP.Net MVC 中，如何在Global.asax中配置一个指向Area内部的默认Route

    ASP.Net MVC 中配置Route的时候可以设置一个默认的Route. 比如我要在输入http://localhost的时候默认进入http://localhost/home/index.可以在 ...

  9. OSGI在Eclipse中执行-console出错的问题

    在Eclipse中安装osgi插件后,执行出现异常:

  10. Tips--8080端口被占用了怎么办

    下面以win7为例: 打开任务管理器   ctrl+alt+. 找到8080端口对应的PID 停止相应PID的进程即可: