まず、ディレクトリにあるファイルすべてを img 要素にするスクリプトをかく。
#!/usr/bin/perl
open OUT, "> display.html"
or warn "fail";
opendir DH, ".";
print OUT "<html>\n";
print OUT "<head>\n";
print OUT "<script type=\"text/javascript\" src=\"./slideshow.js\"></script>\n";
print OUT "<link rel=\"stylesheet\" href=\"./slideshow.css\" type=\"text/css\"></link>";
print OUT "</head>\n";
print OUT "<body>\n";
foreach $file (readdir DH) {
if ($file =~ /jpg$/) {
print OUT "<img src=\"";
print OUT "$file";
print OUT "\">\n";
}
}
print OUT "</body>\n</html>\n";
スライドショウのために、slideshow.css と slidesyou.js を用意。
まず、slideshow.css
body {
background-color:black;
}
img {
display : none;
margin-left : auto;
margin-right : auto;
}
つぎに、slideshow.js
var img_list;
var i = 0;
function slide() {
if (i == 0) {
img_list[img_list.length-1].style.display = "none";
} else {
img_list[i-1].style.display = "none";
}
img_list[i].style.display = "block";
if (i == img_list.length-1) { i = 0; } else { i++;}
}
function show(e) {
img_list = document.getElementsByTagName("img");
img_list[img_list.length-1].style.display = "block";
window.setInterval(slide, 10000);
}
window.addEventListener("load", show, false);
まあ、即席で作ったので、だいぶ汚いコードですが・・・。
本当はopacityとか使ってトランジッションとかを派手にしたいんですけど、
今日はここまで。
投稿
0 件のコメント:
コメントを投稿