还是直接上代码比较好

<!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. office激活方式，超简单

    只需要安装个小小的程序,亲测安全可靠 详情点击下方链接 https://blog.csdn.net/weixin_40941966/article/details/80872533

  2. js往标签下插入标签的方法

    js="document.getElementsByClassName('CodeMirror-line')[0].innerHTML = 'xxxxxx'"dr.execute_ ...

  3. 讲sql注入原理的 这篇不错(有空可以看看)

    我们围绕以下几个方面来看这个问题: 1.什么是sql注入? 2.为什么要sql注入? 3.怎样sql注入? 1.什么是sql注入? 所谓SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或 ...

  4. JAVA8 JVM内存结构变了，永久代到元空间

    在文章<JVM之内存结构详解>中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化.作为面试官如果你还不知道,那么面试过程中是不是有些露怯? ...

  5. SQL 创建表

    SQL 创建表是通过SQL CREATE TABLE 语句来实现,该语句是DDL SQL语句.CREATE TABLE语句用于创建用于存储数据的表.在创建表时,可以为列定义主键.惟一键和外键等完整性约 ...

  6. 快速配置和切换http和https

    <link href="//maze.gxrc.com/css/global.css" rel="stylesheet" type="text/ ...

  7. webpack官网demo起步中遇到的问题

    在webpack官网demo一开始搭建中 

  8. Memory Barriers Are Like Source Control Operations

    From:   http://preshing.com/20120710/memory-barriers-are-like-source-control-operations/ If you use ...

  9. java - redis学习

    在学习redis之前,我们首先需要了解一下NoSQL(非关系数据库).非关系型数据库通常指数据以对象的形式存储在数据库中,而对象之间的关系通过每个对象自身的属性来决定. 为什么需要NoSQL? (1) ...

  10. SAS学习笔记10 宏变量

    一个宏变量存放的值保持不变直到被修改(全局变量) 引用时,变量名前加上"&" 宏变量在引用时放在双引号之间会被解读(单引号不会被解读) 用户定义的宏变量,有三种方式: %l ...