Test CoutDown

by sazakharov

HTML

<div class="container">
    <ul class="flip minutePlay">
        <li> <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
            </a>

        </li>
        <li> <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
            </a>

        </li>
        <li> <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
            </a>

        </li>
        <li> <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
            </a>

        </li>
        <li> <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
            </a>

        </li>
        <li> <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">5</div>
         ...

CSS

/* Reset */
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    cursor: pointer;
    text-decoration: none;
    color: #ccc;
}
a:hover {
    color: #fff;
}
ul {
    list-style: none
}
.clearfix:before, .clearfix:after {
    content:" ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/* Main */
 html, body {
    min-height: 100%;
}
body {
    font: normal 11px"Helvetica Neue", Helvetica, sans-serif;
    user-select: none;
    color: #888;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.container {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140px;
    height: 90px;
    margin: -45px 0 0 -70px;
}
ul.flip {
    position: relative;
    float: left;
    margin: 0.5px;
    width: 20px;
    height: 30px;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}
ul.flip li {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
ul.flip li:first-child {
    z-index: 2;
}
ul.flip li a {
    display: block;
    height: 100%;
    perspective: 200px;
}
ul.flip li a div {
    z-index: 1;
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
}
ul.flip li a div .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}
ul.flip li a div.up {
    transform-origin: 50% 100%;
    top: 0;
}
ul.flip li a div.up:after {
    content:"";
    position:absolute;
    top:44px;
    left:0;
    z-index: 5;
    width: 100%;
    height: 3px;
    background-color: rgba(0, 0, 0, .4);
}
ul.flip li a div.down {
    transform-origin: 50% 0%;
    bottom: 0;
}
ul.flip li a div div.inn {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 200%;
    color: #ccc;
    text-shadow: 0 1px 2px #000;
    text-align: center;
    background-color: #333;
    border-radius: 3px;
}
ul.flip...

JavaScript

var s = 0;
setInterval(secondPlay, 1000);

function secondPlay() {

    $("body").removeClass("play");
    var aa = $("ul.secondPlay li.active"),
        ab = $("ul.minutePlay li.active");
    if (aa.html() == undefined) {
        aa = $("ul.secondPlay li").eq(0);
        aa.addClass("before")
            .removeClass("active")
            .next("li")
            .addClass("active")
            .closest("body")
            .addClass("play");
    } else if (aa.is(":last-child")) {
        $("ul.secondPlay li").removeClass("before");
        aa.addClass("before").removeClass("active");
        aa = $("ul.secondPlay li").eq(0);
        aa.addClass("active")
            .closest("body")
            .addClass("play");
    } else {
        $("ul.secondPlay li").removeClass("before");
        aa.addClass("before")
            .removeClass("active")
            .next("li")
            .addClass("active")
            .closest("body")
            .addClass("play");
    }
    if (s == 9) {
        if (ab.html() == undefined) {
            ab = $("ul.minutePlay li").eq(0);
            ab.addClass("before")
                .removeClass("active")
                .next("li")
                .addClass("active")
                .closest("body")
                .addClass("play");
        } else if (ab.is(":last-child")) {
            $("ul.minutePlay li").removeClass("before");
            ab.addClass("before").removeClass("active");
            ab = $("ul.minutePlay li").eq(0);
            ab.addClass("active")
                .closest("body")
                .addClass("play");
        } else {
            $("ul.minutePlay li").removeClass("before");
            ab.addClass("before")
                .removeClass("active")
                .next("li")
                .addClass("active")
                .closest("body")
                .addClass("play");
        }
    }
    s = (s == 9) ? 0 : s + 1;
}