jsでパラパラアニメ デモ

元記事はこちら

html

<div id="anime">
    <div class="inner">
        <img src="img/photo/aurora_001.jpg" alt="">
        <img src="img/photo/aurora_002.jpg" alt="">
        <img src="img/photo/aurora_003.jpg" alt="">

        (省略)

        <img src="img/photo/aurora_135.jpg" alt="">
        <img src="img/photo/aurora_136.jpg" alt="">
    </div>
</div>

css

#anime {
    width: 640px;
    height: 360px;
    overflow: hidden;
}

    #anime > .inner {
        width: 87040px; //横に並べる
        font-size: 0;
    }

        #anime > .inner img {
            display: inline;
        }

javascript

;(function ($) {
    $(function () {
        var Anime = new ANIMATE_APP.classes.Animation($("#anime"), {
            repeat: -1,
            interval: 100,
            autoPlay: true
        });

        //再生
        $("#animation-play").on("click", function () {
            Anime.play();
        });

        //一時停止
        $("#animation-pause").on("click", function () {
            Anime.pause();
        });

        //停止
        $("#animation-stop").on("click", function () {
            Anime.stop();
        });

        //先頭に戻る
        $("#animation-foward").on("click", function () {
            Anime.forward();
        });

        //再生
        $("#animation-next").on("click", function () {
            Anime.next();
        });

        //再生
        $("#animation-go").on("click", function () {
            Anime.to($("#goto").val());
        });
    });
}(jQuery));