どもです。
仕事の夢を見ると寝た気がしない餅。です。
今日はまたスライドショーを組むことになったのですが、今回の要望は
「ボタンなし、リンクなし、ただ画像が一定間隔で切り替わるだけ」のとてもシンプルなものでした。
ならば僕は、超シンプルなスライドショープログラムで応えましょう。
というわけで、毎度のごとくHTML、CSS、jQueryでスライドショーを作ります。
まず、HTMLですが、
<p class="slide_body">
<img src="/img/slide/1.jpg" class="slide_img slide_img1">
<img src="/img/slide/2.jpg" class="slide_img slide_img2">
<img src="/img/slide/3.jpg" class="slide_img slide_img3">
</p>
こんな感じでクラスを指定します。
.slide_body{
width:画像の横幅;
height:画像の縦幅;
position:relative;
}
.slide_body img{
position:absolute;
left:0;
top:0;
transition:.3s;
opacity:0;
}
img.slide_img1{
opacity:1;
}
こんな感じにスタイルを指定。
簡単スライドショーの定番、position:absoluteで画像を全て同じ位置に配置します。
var slidesnow = 1 ; // 現在のスライド位置
var slideshow = 13 ; // スライドの数
$(function(){
setInterval(function() {
if(slidesnow>=slideshow){
$(".slide_img").css("opacity","0");
$(".slide_img1").css("opacity","1");
slidesnow=1;
}else{
slidesnow++;
$(".slide_img").css("opacity","0");
$(".slide_img"+slidesnow).css("opacity","1");
}
}, 5000); //setInterval()で5秒間隔で繰り返し実行する
});
スクリプトはこれでおｋです。
もう説明することもないシンプル具合ｗ