slide show

by Reiot

HTML

Hello World
<div>
    <ul></ul>
</div>

<button class="home">|&lt;</button>
<button class="prev">&lt;&lt;</button>
<button class="refresh">refresh</button>
<button class="next">&gt;&gt;</button>
<button class="end">&gt;|</button>

CSS

div {
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 100px;
}

ul {
    position: absolute;
    white-space: nowrap;
    -webkit-transform: perspective(500px) rotateX(20deg);
    -webkit-transform-origin: 50%;
}

li {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: yellow;
}

JavaScript

$(function() {
    var $ul = $('ul');
    for (var i = 0; i < 10; i++) {
        $ul.append('<li>' + i + '</li>');
    }

    $('li').live('click', function() {
        $(this).fadeOut('slow');
    });

    $('button.refresh').click(function() {
        $('li').fadeIn();
    });

    $('button.prev').click(function() {
        $('ul').animate({
            'left': '+=100px'
        }, 'slow');
    });

    $('button.next').click(function() {
        $('ul').animate({
            'left': '-=100px'
        }, 'slow');
    });

    $('button.home').click(function() {
        $('ul').animate({
            'left': 0
        }, 'slow');
    });

    $('button.end').click(function() {
        var $ul = $('ul');
        $ul.animate({
            left: $('div').width() - $ul.width()
        }, 'slow');
    });
});