ど素人から毛を生やす。<延>

超シンプルスライドショー

Web > javascript 2014年2月28日(最終更新:3年前)

このページは2014.2.28に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
仕事の夢を見ると寝た気がしない餅。です。

今日はまたスライドショーを組むことになったのですが、今回の要望は

「ボタンなし、リンクなし、ただ画像が一定間隔で切り替わるだけ」のとてもシンプルなものでした。

ならば僕は、超シンプルなスライドショープログラムで応えましょう。

というわけで、毎度のごとく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秒間隔で繰り返し実行する
});

スクリプトはこれでおkです。
もう説明することもないシンプル具合w

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)