还是直接上代码比较好

<!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. osg qt ifc

    ui_ifcproject_20190702.h #pragma once /************************************************************* ...

  2. MySQL数据库备份之xtrabackup工具使用

    一.Xtrabackup备份介绍及原理 二.Xtrabackup的安装 1.在centos7上基于yum源安装percona-xtrabackup软件 [root@node7 ~]# yum -y i ...

  3. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_11-前端显示当前用户-前端请求jwt

    前端代码 sessionStorage也是key/value的格式 页头显示当前用户 查询jwt nginx里面的配置 测试 开启认证服务 进行登陆 跳转到首页就应该立即请求查询. 跳转到首页 coo ...

  4. delphi TClientDatset资料

    第十一章 TClientDataSet 与TTable.TQuery一样,TClientDataSet也是从TDataSet继承下来的,它通常用于多层体系结构的客户端.TClientDataSet最大 ...

  5. Angular 8 - 更小的包

    Angular 8 - 更小的包 Angular 8 发布 原文地址:https://blog.angular.io/version-8-of-angular-smaller-bundles-cli- ...

  6. Python（1）自动发送邮件

    python发邮件需要掌握两个模块的用法,smtplib和email,这俩模块是python自带的,只需import即可使用.smtplib模块主要负责发送邮件,email模块主要负责构造邮件. sm ...

  7. 游戏协议模拟测试工具（TcpEngine）使用简介

    功能介绍 在有的网络开发需要走二进制流协议场景,比如网络游戏开发,在开发阶段,前端和后端协商好协议后就分别开发.在开发写代码的时候,有时需要对端发送一条完整的协议过来触发一下自己的代码,进行单步调试或 ...

  8. ByteDance面试

    1.HashMap.HashSet源码解读 2.Http状态码.包头内容有哪些 响应头 说明 示例 状态 Access-Control-Allow-Origin 指定哪些网站可以跨域源资源共享 Acc ...

  9. 控件setText与setValue赋值顺序先后区别

    1.text与value设置不同的值一定要先赋值 value后赋值text, 否则全为value值 2.若只setValue,则getValue 与 getText获取的值全为value值 $('#t ...

  10. PAT甲级 模拟题_C++题解

    模拟题 PAT (Advanced Level) Practice 模拟题 目录 1008 Elevator (20) 1042 Shuffling Machine (20) 1046 Shortes ...