【JS】JavaScriptでスライド式ギャラリーを作ってみた

デモはこちらから

さてさて、文字だけじゃ寂しいかな?と今回からスクショも入れていきます!
(こういうやり方、他のサイトでよく見るけど毎回キャプチャしてるのかな?結構めんどくさいなーと思うんだけど、何か簡単なやり方あるんだろうか?)

少し、話しが逸れましたね。今回は、JSでスライド式ギャラリーを作りました。

JSでCSSを書き換えるやり方を学んだだけで、かなり出来る事が広がりますね。

これは、解説書に載ってたものを自分なりにアレンジして、スライド式にしてみました。

ライトボックス風なものも実装しています。
人のをコピーして使う事しか出来なかったものが自力で出来るようになってちょっと感動しました。

一応見た目と動作は整えたつもりだけれども、まだまだ改善したいところがたくさんあります。

まず、サムネイルの動きをループにしたい。Flashで同じようなものを作ったことがあるのでなんとなく考え方はわかるんですが…。

あとは、ライトボックスが出る時にフェードや画像が拡大される的なアニメーションをつけたかった…。

ただ、ここで時間かけるよりもとりあえず解説書の読破を優先しようと思い、今回は棚上げです。

ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)
ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)
ー Amazon.co.jpで買う