还是直接上代码比较好

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
<style type="text/css">
.tabs{position:relative;width: 100%;height: 100%; overflow: hidden;}
.tabs ol,.tabs ol li{list-style: none; }
.tabs ol{position: absolute;left: 50%;bottom: 50px;width: 160px;height: 15px;
margin-left:-80px;z-index: 1010;}
.tabs ol li{
float: left;width: 15px;height: 15px;margin-left: 10px;
border-radius: 50%; background: #ED346C;
line-height: 15px;text-align: center;font-size: 15px;background: #00b274;
}
.tab-pane-wrap{width: 100%;height: 1920px;position: relative;}
.tabs .tab-pane{
position:absolute;left:0;top:480px;width: 100%;height: 480px;
float: left;text-align: center;font-size: 50px;line-height: 250px;
}
.color0{background:#0000FF;}
.color1{background: #0B4C6E;}
.color2{background: #2079BE;}
.color3{background: #2B542C;}
ol li.on{background:red ;}
.tabs .tab-pane.on{left: 0;top:0;}
section{
width: 600px;height: 480px;margin: 0 auto;
}
</style>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.directive('tabs',function($interval){
return{
restrict:'E',//指定以某种格式来调用指令
//元素（E）,属性（A），类（C），注释（M）
replace:true,//将自定义标签从生成的dom中完全移除
templateUrl:'index-link.html',
link:function(scope, element, attr){
scope.arr=['0','1','2','3'];
scope.cls=[
{cl1:'tab-pane',cl2:'color0',ani:'animated'},
{cl1:'tab-pane',cl2:'color1',ani:'animated'},
{cl1:'tab-pane',cl2:'color2',ani:'animated'},
{cl1:'tab-pane',cl2:'color3',ani:'animated'}
];
console.log($interval)
scope.now=0;
scope.old=999;
scope.click=function(index1){
scope.old=scope.now;
scope.now=index1;

};
var interval=$interval(function(){
scope.now++;
if(scope.now>3){
scope.now=0;
}
},2000);
scope.mouseenter=function(){
$interval.cancel(interval);
};
scope.mouseleave=function(){
interval=$interval(function(){
scope.now++;
if(scope.now>3){
scope.now=0;
}
},2000);
};
}
}
});

</script>
</head>
<body ng-app="myapp">
<tabs></tabs>
<script type="text/ng-template" id="index-link.html">
<section id="carouse" ng-mouseenter="mouseenter();" ng-mouseleave="mouseleave()">
<div class="tabs">
<ol>
<li ng-repeat="ind in arr" ng-click="click($index)" ng-class="{on:$index==now}">{{ind}}</li>
</ol>
<div class="tab-pane-wrap">
<div ng-repeat="cl in cls" class="{{cl.cl1}} {{cl.cl2}} {{cl.ani}}" ng-class="{on:$index==now,slideOutLeft:$index==old,lightSpeedIn:$index==now}"></div>
</div>
</div>
</section>
</script>
</body>
</html>

angular轮播图的更多相关文章

  1. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

  2. nativescript——轮播图组件

    import { Directive, ElementRef, AfterViewInit, Input, OnDestroy } from "@angular/core"; im ...

  3. ionic3-ng4学习见闻--(轮播图完美方案)

    ionic上 轮播图是最坑的插件了吧,各种bug和 问题. 事件也不好用.. 于是,我终于搞出来了一个完美的方案, 适用于,动态获取轮播图数据,自动循环播放,跳转其他页面回来后自动播放,手指触摸后自动 ...

  4. 前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  5. ionic3 slides轮播图手动滑动后无法自动播放问题

    我们都知道Ionic3为我们提供了一套丰富易用的UI组件库,然而凡事是都有不完美之处,今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题. 先开UI小姐姐给到的3张美美哒效果图 ...

  6. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  7. AngularJS：实现轮播图效果

    实现步骤如下: 要实现这个功能,可以http://angular-ui.github.io/bootstrap/ 中的控件实现.实现步骤如下: 1. 下载ui-bootstrap.js程序http:/ ...

  8. 解决ionic2/ionic3轮播图切换页面或者点击过后不自动轮图

    我们在ionic2/ionic3开发的过程中会出现切换页面或者滑动切换轮播图出现轮播图不再轮播的情况,这其实需要一些配置. 首先在运用到轮播图的component中引入 import {ViewChi ...

  9. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

随机推荐

  1. 【转载】 第四范式首席科学家杨强：AlphaGo的弱点及迁移学习的应对（附视频）

    原文地址: https://www.jiqizhixin.com/articles/2017-06-02-2 ============================================= ...

  2. osg fbx 模型树结构

    void Test::printOsgGroup(osg::ref_ptr<osg::Group> &groupParam) { qDebug() <<groupPar ...

  3. 阶段5 3.微服务项目【学成在线】_day18 用户授权_13-细粒度授权-细粒度授权介绍

    3 细粒度授权 3.1 需求分析 什么是细粒度授权? 细粒度授权也叫数据范围授权,即不同的用户所拥有的操作权限相同,但是能够操作的数据范围是不一样的.一个 例子:用户A和用户B都是教学机构,他们都拥有 ...

  4. 123457123457#0#-----com.twoapp.FromPuzzle02--前拼后广--儿童农场拼图游戏jiemei

    com.twoapp.FromPuzzle02--前拼后广--儿童农场拼图游戏jiemei

  5. SpringCloud学习成长之十二 断路器监控

    在我的第四篇文章断路器讲述了如何使用断路器,并简单的介绍了下Hystrix Dashboard组件,这篇文章更加详细的介绍Hystrix Dashboard. 一.Hystrix Dashboard简 ...

  6. WPF窗体应用程序开发

    1.Window:登录窗口.主窗体.消息框 2.UserControl:业务界面.消息框(如果使用UC来实现,则需要做特殊的处理,比如中断功能如何处理?)(显示一个UC,必须将其添加到容器中,所以&l ...

  7. Mac更新npm和node版本

    npm: 查看当前版本: npm --version 更新到最新版: sodu npm install npm@latest -g node: 1.查看当前版本: node -v 2.清除npm当前缓 ...

  8. Python之Numpy库常用函数大全（含注释）(转)

    为收藏学习,特转载:https://blog.csdn.net/u011995719/article/details/71080987 前言:最近学习Python,才发现原来python里的各种库才是 ...

  9. 最新 竞网java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.竞网等10家互联网公司的校招Offer,因为某些自身原因最终选择了竞网.6.7月主要是做系统复习.项目复盘.LeetCode ...

  10. golang 中 map 转 struct

    golang 中 map 转 struct package main import ( "fmt" "github.com/goinggo/mapstructure&qu ...