<!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. 将Excel导入到数据中

    常用的方式的有两种: 1. 通过 Microsoft.Jet.OLEDB.4.0 或  Microsoft.ACE.OLEDB.12.0 Microsoft.ACE.OLEDB.12.0 需要安装 A ...

  2. 《30天自制操作系统》读书笔记(5) GDT&IDT

    梳理项目结构 项目做到现在, 前头的好多东西都忘了, 还是通过Makefile重新理解一下整个项目是如何编译的: 现在我们拥有这么9个文件: ipl10.nas    InitialProgramLo ...

  3. MySql可视化工具MySQL Workbench使用教程

    1. MySQL Workbench MySQL Workbench 为数据库管理员.程序开发者和系统规划师提供可视化的Sql开发.数据库建模.以及数据库管理功能. 2.MySQL Workbench ...

  4. BZOJ 1207 打鼹鼠

    Description 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿Q编写了一个打鼹鼠的游戏:在一个n*n的网格中,在某些时刻鼹鼠会在某一个网格探 ...

  5. 【Java】理解 UDDI 注册中心的 WSDL

    如何发布和查找 WSDL 服务描述 Web 服务描述语言(WSDL)有多种用法.特别是,根据应用程序的需要,WSDL 在 UDDI 注册中心有好几种使用方法.在这第 1 篇文章中(本系列共三篇),我们 ...

  6. mouseenter 和 mouseleave

    做一个下拉菜单的时候,HTML结构如下: <ul> <li class="red"> <a href="">第一级</ ...

  7. ioc开发学习 --简易计时器 （基于iPhone5屏幕尺寸开发）

    超简单的秒表:包含:开始.暂停(不清零).清零 方法 核心代码 // // ViewController.m // MiaoBiao // // Created by Ibokan on 15/8/1 ...

  8. 《深入Linux内核》 UNIX的一些故事

    Unix文件的类型1.普通文件2.目录3.符号链接4.面向块的设备文件5.面向字符的设备文件6.管道和命名管道7.套接字 点评:不明觉厉 打开文件进程只能访问“打开的”文件.为了打开一个文件,进程调用 ...

  9. 更改Visual Studio 2010/2012/2008的主题设置

    一.更改主题: 主题网站:http://studiostyl.es/ Visual Studio 2010发布也已经有一段时间了,不过安装后默认的白底的主题长时间看代码可能会感觉眼睛酸痛,况且时间长了 ...

  10. HDOJ 1214 圆桌会议

    Problem Description HDU ACM集训队的队员在暑假集训时经常要讨论自己在做题中遇到的问题.每当面临自己解决不了的问题时,他们就会围坐在一张圆形的桌子旁进行交流,经过大家的讨论后一 ...