slideshow.js

javascript

クラスの書き方の勉強としてこの前作ってたやつをクラスにしてみた。
(JavaScriptはクラスって言い方でいいんだっけな。。オブジェクト？)
まずはprototype.jsは使わないやつで。

function Slideshow(images, config) {
    this.images = images;
    this.stateTextId = config.stateTextId;
    this.startText = config.startText || 'start';
    this.stopText = config.stopText || 'stop';
    this.callback = config.callback;
    this.intervalTime = config.intervalTime;

    this.index = 0;
    this.timer = null;
    this.isSliding = false;

    this.setIntervalTime = setIntervalTime;
    this.setImage = setImage;
    this.nextImage = nextImage;
    this.previousImage = previousImage;
    this.start = start;
    this.stop = stop;
    this.restart = restart;
    this.toggle = toggle;
}

function setIntervalTime(time) {
    this.intervalTime = time;
}

function setImage(image, caption) {
    if ( this.index < 0 ) {
        this.index = this.images.length - 1;
    } else if ( this.index >= this.images.length ) {
        this.index = 0;
    }
    document.getElementById(caption).innerHTML = this.images[this.index];
    document.getElementById(image).src = this.images[this.index];
}

function nextImage(image, caption) {
    ++this.index;
    this.setImage(image, caption);
}

function previousImage(image, caption) {
    --this.index;
    this.setImage(image, caption);
}

function start() {
    if ( !this.callback ) {
        return;
    }
    this.timer = setInterval(this.callback, this.intervalTime);
    this.isSliding = 1;
    if (this.stateTextId) {
        document.getElementById(this.stateTextId).innerHTML = this.stopText;
    }
}

function stop() {
    clearInterval(this.timer);
    this.isSliding = 0;
    if (this.stateTextId) {
        document.getElementById(this.stateTextId).innerHTML = this.startText;
    }
}

function restart() {
    this.stop();
    this.start();
}

function toggle() {
    if ( this.isSliding ) {
        this.stop();
    } else {
        this.start();
    }
}

なんかthisばっかでキモイ。
それを使う側。

<html>
<head>
<title>setInterval / clearInterval / keyCode</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="./slideshow.js"></script>
<script language="javascript">
<!--
var images = new Array(
    "/images/blank.gif",
    "/images/closelabel.gif",
    "/images/indicator.gif",
    "/images/next.gif",
    "/images/prev.gif",
    "/images/rss.gif",
    "/images/close.gif",
    "/images/image-1.jpg",
    "/images/loading.gif",
    "/images/nextlabel.gif",
    "/images/prevlabel.gif",
    "/images/thumb-1.jpg"
);

var ss = new Slideshow( images, {
    stateTextId : 'slideState',
    startText : 'start',
    stopText : 'stop',
    callback : 'next()',
    intervalTime : 1000
});

function changeSlideShowInterval(time) {
    ss.setIntervalTime(time);
    ss.restart();
}

function onInit() {
    registerHandler();
    ss.start();
}

function next() {
    ss.nextImage('imageBox', 'imageBoxCaption');
}

function registerHandler() {
    var form = document.setIntervalForm;
    form.time.onfocus = function() {
        this.hasFocus = true;
    }
    form.time.onblur = function() {
        this.hasFocus = false;
    }
}

document.onkeydown = function(event) {
    if ( document.setIntervalForm.time.hasFocus ) {
        return;
    }

    var code = event.keyCode;
    // 74:j
    // 75:k
    // 78:n
    // 80:p
    if ( code == 74 || code == 78 ) {
        ss.nextImage('imageBox', 'imageBoxCaption');
    } else if ( code == 75 || code == 80 ) {
        ss.previousImage('imageBox', 'imageBoxCaption');
    }

    event.stopPropagation();
}

// -->
</script>
</head>
<body onload="onInit()">

<form name="setIntervalForm" onsubmit="
changeSlideShowInterval(this.time.value);return false;
">
スライドショーの間隔を<input type="text" name="time" value="" size="20">ミリ秒に
<input type="submit" name="submit" value="変更する">
</form>

<p>
以下のショートカットキーが使えます。<br>
n, j : 次の画像<br>
k, p : 前の画像<br>
</p>
<p>
[<a href="javascript:ss.toggle()" id="slideState"></a>]
</p>

<p>
<img src="" id="imageBox" border="0" />
<div id="imageBoxCaption"></div>

</p>

</body>
</html>