还是直接上代码比较好

<!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. HTTP和WSGI协议

    HTTP协议简介 超文本传输协议(HyperText Transfer Protocol)是一种应用层协议.HTTP是万维网的数据通信的基础.设计HTTP最初的目的是为了提供一种发布和接收HTML页面 ...

  2. 常用SQL50句

    Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,Tname) 教师表 问题 ...

  3. Intellij-编码设置

    目录 文件编码修改 @(目录) 文件编码修改 • 上图标注 1 所示,IDE 的编码默认是 UTF-8 , Project Encoding 虽然默认是 GBK ,但是一般都建议 修改为 UTF-8 ...

  4. 使用ClientScriptManager向客户端注册脚本

    ClientScriptManager在非异步(就是说非AJAX)环境下使用的.如果要在异步环境下注册脚本应该使用ScriptManager的静态方法来注册(ScriptManager兼容异步于非异步 ...

  5. iOS面试考察点

    )自我介绍.项目经历.专业知识.自由提问 (2)准备简历.投发简历.笔试(电话面试.).面试.复试.终面试.试用.转正.发展.跳槽(加薪升职) 1闲聊 a)自我介绍:自我认识能力 b)评价上一家公司: ...

  6. Direct2D 学习笔记（3）图层 Layer

    利用图层Layer绘制资源网址:https://docs.microsoft.com/zh-cn/windows/win32/direct2d/direct2d-layers-overview   1 ...

  7. Python 动态规划算法

    背包问题 假设你是一个小偷,背一个可装4磅东西的背包.可盗窃的商品有如下3件: 音响,4磅,价值3000美元 笔记本电脑,3磅,价值2000美元 吉他,1磅,价值1500美元 为了让盗窃的商品价值最高 ...

  8. 2019年11月27日 Linux所学知识 总结

    查看网络信息和网络状态 nmcli connection show 使用con-name参数指定公司使用的网络会话名称company,然后依次用ifname参数指定本机的网卡名称. 用autoconn ...

  9. 【计算机视觉】Selective Search for Object Recognition论文阅读2

    Selective Search for Object Recognition 是J.R.R. Uijlings发表在2012 IJCV上的一篇文章.主要介绍了选择性搜索(Selective Sear ...

  10. codevs1227:方格取数2

    题目描述 Description 给出一个n*n的矩阵,每一格有一个非负整数Aij,(Aij <= )现在从(,)出发,可以往右或者往下走,最后到达(n,n),每达到一格,把该格子的数取出来,该 ...