<!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. Python的subprocess模块

    尝试在Python中运行可执行文件,网上给出的解决方案是: import os os.system("此处填程序路径") 我要运行的程序文件名中有空格,因此果断失败了,查看了一下帮 ...

  2. !a && !b 和 !(a || b) 的故事

    // awk代码,当continue执行时说明书是免费的 || )) { continue } 这段代码大概是半年前写的,半年后过来读,发现已经不理解这段代码了,虽然理解当contniue执行时意味着 ...

  3. 单例模式在Unity中的应用

    起因:每个游戏场景中都会有许多的游戏对象,而各个游戏场景之间也是同等的关系.如何去管理它们,是我们要解决的问题. 场景中各脚本间的直接访问,会在各脚本间形成一个巨大而又混乱的网络,这给以后代码的维护带 ...

  4. input placeholder文字垂直居中(Mobile & PC)

    Html5输入框支持placeholder,但是在定义文本框中定义placeholder存在兼容问题 <input type="text" placeholder=" ...

  5. Flux工作流

    Flux工作流 模型层(M)和控制层(C) Flux 只是这个模式的一个例子. 很多代码和一堆重复的模板 在其他JavaScript环境中实现重用. 强大又容易配置的模块化打包工具Webpack来简化 ...

  6. Linux下安装软件心得

    1 软件安装方法: 源代码编译安装:tar.gz等压缩格式,需要经过手动编译,./configure,make ,make install ,然后进行配置操作 二进制安装:tar.gz等压缩格式,解压 ...

  7. Unity NGUI实现按钮点击播放Aniamtion

    unity版本:4.5 NGUI版本:3.6.5 参考链接:http://www.colabug.com/thread-1029974-1-1.html,作者:COLABUG.COM 橘虞 1.怎么创 ...

  8. 数据结构(线段树)：BZOJ 1018: [SHOI2008]堵塞的交通traffic

    1018: [SHOI2008]堵塞的交通traffic Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 2638  Solved: 864 Descri ...

  9. 线段树(维护最大值)：HDU Billboard

    Billboard Time Limit: 20000/8000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  10. 【动态规划】Vijos P1104 采药（NOIP2005普及组第三题）

    题目链接: https://vijos.org/p/1104 题目大意: T时间,n个物品,每个耗时ti,可获得收益ci,求最大收益. 题目思路: [动态规划] 01背包裸题.一维二维都过了,放个一维 ...