/ Zepto

Zepto.js图片触摸切换演示

简单的图片轮换,代码来自Zepto官方网站,做抛砖引玉之用。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Zepto Demo</title>
    <style type="text/css">
        #tour {
            max-width: 100%;
            width: 512px;
            overflow-x: hidden;
            position: relative;
            -webkit-transform: translateZ(0);
        }
        #tour img {
            max-width: 500%;
        }
    </style>
</head>
<body>
<div id=tour>
    <img src=data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=>
</div>

<script src="http://zeptojs.com/zepto.min.js"></script>
<script>
    // For retina screens, use a hi-res version of the tour image.
    // We're swapping this out on-demand (not an ideal solution)
    // to avoid rendering bugs on iOS.
    $('#tour > img')[0].src =('devicePixelRatio' in window && devicePixelRatio > 1) ? 'http://zeptojs.com/intro2x.jpg' : 'http://zeptojs.com/intro.jpg'

    var tour = $('#tour'), tourSlides = tour.children(),tourSlide = 0, tourSlidesTotal = 5;

    function advanceTourSlide(delta) {
        tourSlide = (tourSlide + delta + tourSlidesTotal) % tourSlidesTotal
        var offset = tourSlide * tour.width()
        tourSlides.animate({ translateX:-offset + 'px' })
    }

    tour.on('click swipeLeft', function () {
        advanceTourSlide(+1)
    }).on('swipeRight', function () {
        advanceTourSlide(-1)
    })
</script>
</body>
</html>