zepto.js ,touch.js左右滑动

浏览数：76 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <style>
    html,
    body {
        margin: 0;
        height: 100%;
    }
    div {
        border: 1px solid;
    }
    #container {
        height: 100%;
    }
    #div1 {
        display: none;
        position: absolute;
        background: #AAA;
        top: 0;
        left: 0;
        min-width: 300px;
    }
    #div1 div.left {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
    #div1 div.right {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
    }
    .current {
        margin-left: 100px
    }
    </style>
</head>

<body>
    <div id=‘container‘>
        <a class="photo" i=‘1‘ href="/css/img/a.png">aaaaaaaaaaaaa</a>
        <br/>
        <a class="photo" i=‘2‘ href="/css/img/c.png">bbbbbbbbbbbbb</a>
        <br/>
        <a class="photo" i=‘3‘ href="/css/img/m.png">cccccccccccccc</a>
        <br/>
        <a class="photo" i=‘4‘ href="/css/img/p.png">ddddddddddddd</a>
        <br/>

    </div>

    <div id=‘div1‘>
        <div id="left" class="left"> 上一张</div>
        <div>
            <span class="current">0</span>/<span class="total">0</span>
            <br />
            <img id=‘img1‘ src="/css/img/p.png" i=‘0‘ />
            <br />
            <span class="current">0</span>/<span class="total">0</span>
        </div>
        <div id="right" class="right">下一张</div>
    </div>

    <script src="js/zepto.js"></script>
    <script src="js/touch.js"></script>
    <script>
    var photoCount = $(".photo").length;
    $(".total").text(photoCount);

    $(".photo").tap(function() {
        showPhoto($(this));
        return false;
    });

    $("#left").tap(prev);
    $("body").swipeRight(prev);
    function prev() {
        var i = parseInt($("#img1").attr("i")) - 1;
        if (i > 0) {
            var prev = $(‘.photo[i="‘ + i + ‘"]‘);
            showPhoto(prev);
        }
    }


    $("body").swipeLeft(next);
    $("#right").tap(next);
    function next() {
        var i = parseInt($("#img1").attr("i")) + 1;
        if (i <= photoCount) {
            var next = $(‘.photo[i="‘ + i + ‘"]‘);
            showPhoto(next);
        }
    }

    function showPhoto(a) {
        $(‘#div1‘).show();
        var src = a.attr("href");
        if (src) {
            var i = a.attr("i");
            $("#img1").attr("src", src);
            $("#img1").attr("i", i);
            $(".current").text(i);
            return true;
        }
        return false;
    }

    $("#container").tap(function(){
        $(‘#div1‘).hide();
    });
    </script>
</body>

</html>