还是直接上代码比较好

<!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. SQL语言Select经典语句

    -- 示例数据 Select * From Employee Select * From Department -- 返回工资最高的员工的信息 Select * From Employee where ...

  2. ISO/IEC 9899:2011 条款6.2.5——类型

    6.2.5 类型 1.存储在一个对象中的值或由一个函数所返回的值的意义由用于访问该对象的表达式的类型来确定.(声明为一个对象的一个标识符是最简单的这种表达式:其类型在标识符的声明中指定.)类型被划分为 ...

  3. osgText::Text osg字体

    #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...

  4. 42 Flutter仿京东商城项目 修改默认收货地址 显示默认收货地址

    CheckOut.dart import 'package:flutter/material.dart'; import '../services/ScreenAdapter.dart'; impor ...

  5. Scala 踩坑系列

    scala List scala list 如果使用 list(i)的形式进行遍历,如果list数据太多,每次遍历耗时会很久. 因为有一个 head tail 的概念 . 和java的List根据角标 ...

  6. 《海会圣贤》高清字幕版（由香港佛陀教育协会发布DVD恭敬转成）

    常念阿彌陀佛 2015-09-22 视频(建议WIFI下收看)时长72分钟 https://v.qq.com/x/page/f0166amk57h.html 香港佛陀教育协会发布DVD   DVD+高 ...

  7. 关于Selenium remote模式分布式执行UI自动化测试必定面临的性能问题

    1.大部分自动化测试人员都是在本地执行UI自动化测试,也就是代码和浏览器必须在同一台机器上,这样的的缺陷很多,无法多任务并发执行UI自动化测试用例,效率极低 2.正是如此,Selenium 的remo ...

  8. MySQL安装时出现Apply Security Settings错误的解决办法(转）

    最近在学习MySQL时,下载了MySQL5.5版本的安装包,在配置向导的最后的页面却出现了Apply Security Settings的错误.第一次安装时比较顺利,中途卸载了一下,结果第二次安装的时 ...

  9. oracle-复制表结构和表数据

    1.复制表结构和表数据 create table table_new as select * from table_old 2.复制表结构 create table table_new as sele ...

  10. Ocelot+Consul 集群搭建实践

    博客园已经有很多大神写过consul集群搭建了.大家都在玩,那我也不能托后退呢 不过自己研究下还是好的.毕竟每个人遇到的问题的不同 研究过才能说自己玩过consul,文章有部分名词解释是收集网络 Co ...