directive demo #25

Wscats · 2016-09-20T23:50:30Z

angular组件写的轮播图
用<swipe></swipe>标签进行复用
index.html

<!DOCTYPE html>
<html ng-app='wsscat'>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body ng-controller="indexCtrl">
        {{text}}
        <swipe></swipe>
        <swipe></swipe>
    </body>
    <script src="angular.js"></script>
    <script>
        var app = angular.module('wsscat', []);
        app.controller('indexCtrl', function($scope) {
            $scope.text = "轮播图"
            $scope.images = ['denglu.png']
        })
        app.directive('swipe', function($interval) {
            return {
                templateUrl: 'template.html',
                link: function(scope, elm, attr) {
                    console.log(scope)
                    console.log(elm.find('li').length)
                    elm.addClass("red")
                    var curIndex = 0, //当前index
                    imgLen = elm.find('li').length;
                    var autoChange = setInterval(function() {
                        if(curIndex < imgLen - 1) {
                            curIndex++;
                        } else {
                            curIndex = 0;
                        }
                        //调用变换处理函数
                        changeTo(curIndex);
                    }, 2500);

                    function changeTo(num) {
                        var goLeft = num * 400;
                        elm.find('ul').css("left", "-" + goLeft + "px")
                        elm.find("li").removeClass("infoOn").eq(num).addClass("infoOn");
                        elm.find("li").removeClass("indexOn").eq(num).addClass("indexOn");
                    }
                }
            }
        })
    </script>
</html>

template.html

<div id="banner">
    <!-- 轮播部分 -->
    <ul class="imgList">
        <!-- 图片部分 -->
        <li>
            <a href="#"><img ng-src="{{images[0]}}"></a>
        </li>
        <li>
            <a href="#"><img ng-src="{{images[0]}}"></a>
        </li>
        <li>
            <a href="#"><img ng-src="{{images[0]}}"></a>
        </li>
        <li>
            <a href="#"><img ng-src="{{images[0]}}"></a>
        </li>
        <li>
            <a href="#"><img ng-src="{{images[0]}}"></a>
        </li>
    </ul>
</div>
<style type="text/css">
    body,
    div,
    ul,
    li,
    a,
    img {
        margin: 0;
        padding: 0;
    }

    ul,
    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    #wrapper {
        position: relative;
        margin: 30px auto;
        width: 400px;
        height: 200px;
    }

    #banner {
        position: relative;
        width: 400px;
        height: 200px;
        overflow: hidden;
    }

    .imgList {
        position: relative;
        width: 2000px;
        height: 200px;
        z-index: 10;
        overflow: hidden;
        transition: left 2.5s;
    }

    .imgList li {
        float: left;
        display: inline;
    }

    .imgList li a img{
        width: 400px;
        height: 200px
    }
</style>

The text was updated successfully, but these errors were encountered:

qfliailian · 2016-10-15T09:38:03Z

做到最后，发现都不知道复制节点li节点(⊙o⊙)?最后解决

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

directive demo #25

directive demo #25

Wscats commented Sep 20, 2016

qfliailian commented Oct 15, 2016 •

edited

directive demo #25

directive demo #25

Comments

Wscats commented Sep 20, 2016

qfliailian commented Oct 15, 2016 • edited

qfliailian commented Oct 15, 2016 •

edited