Примитивное слайд-шоу

by Axelvaisper

HTML

<link rel="stylesheet" href="http://fotoramajs.com/fotorama/fotorama.css">
<script src="http://fotoramajs.com/fotorama/fotorama.js"></script>
<p>Слайд-шоу:</p>
<div id="fotorama">
    <a href="http://fotoramajs.com/;-)/03.jpg">
        <img src="http://fotoramajs.com/;-)/th/03.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/04.jpg">
        <img src="http://fotoramajs.com/;-)/th/04.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/05.jpg">
        <img src="http://fotoramajs.com/;-)/th/05.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/06.jpg">
        <img src="http://fotoramajs.com/;-)/th/06.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/07.jpg">
        <img src="http://fotoramajs.com/;-)/th/07.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/08.jpg">
        <img src="http://fotoramajs.com/;-)/th/08.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/01.jpg">
        <img src="http://fotoramajs.com/;-)/th/01.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/09.jpg">
        <img src="http://fotoramajs.com/;-)/th/09.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/10.jpg">
        <img src="http://fotoramajs.com/;-)/th/10.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/11.jpg">
        <img src="http://fotoramajs.com/;-)/th/11.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/12.jpg">
        <img src="http://fotoramajs.com/;-)/th/12.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/13.jpg">
        <img src="http://fotoramajs.com/;-)/th/13.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/14.jpg">
        <img src="http://fotoramajs.com/;-)/th/14.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/15.jpg">
        <img src="http://fotoramajs.com/;-)/th/15.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/16.jpg">
        <img src="http://fotoramajs.com/;-)/th/16.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/17.jpg">
        <img src="http://fotoramajs.com/;-)/th/17.jpg">
    </a>
    <a...

CSS

body { margin: 50px 10px; }
p { margin: 0 0 .5em; }

JavaScript

var fotorama = $('#fotorama');

var timeout;

// 3 секунды между кадрами в режиме автоматического воспроизведения
var time = 3000;

// Инициализирую Фотораму
fotorama.fotorama({
    width: 700,
    height: 467,
    resize: true,
    onShowImg: function(data){
        // Сначала очищаю предыдущий таймаут, чтобы действие пользователя не пересеклось с автоматическим переходом
        clearTimeout(timeout);
        // Назначаю новый таймаут
        timeout = setTimeout(function(){
            fotorama.trigger('showimg', data.index+1);
        }, time);
    }
});