zoukankan      html  css  js  c++  java
  • angular轮播图

    还是直接上代码比较好

    <!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; 100%;height: 100%; overflow: hidden;}
    .tabs ol,.tabs ol li{list-style: none; }
    .tabs ol{position: absolute;left: 50%;bottom: 50px; 160px;height: 15px;
    margin-left:-80px;z-index: 1010;}
    .tabs ol li{
    float: left; 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{ 100%;height: 1920px;position: relative;}
    .tabs .tab-pane{
    position:absolute;left:0;top:480px; 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{
    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>

  • 相关阅读:
    HTTP断点续传 规格严格
    Java Shutdown 规格严格
    linux 命令源码 规格严格
    JTable调整列宽 规格严格
    linux 多CPU 规格严格
    Hello can not find git path 规格严格
    Kill 规格严格
    拜拜牛人 规格严格
    Swing 规格严格
    Debugging hangs in JVM (on AIX but methodology applicable to other platforms) 规格严格
  • 原文地址:https://www.cnblogs.com/reaf/p/6618287.html
Copyright © 2011-2022 走看看