Progate

SlideShow


<style>
.img-wrap {position:relative;}
.img-wrap img {width:100%; position: absolute;}
</style>

<script><!--slide show-->
$(function() {
  $('.img-wrap img:nth-child(n+2)').hide();
  var w =$('#slide0').height(); $('.img-wrap').css({'height':w + 'px'});
  setInterval(function() {
    $(".img-wrap img:first-child").fadeOut(2000);
    $(".img-wrap img:nth-child(2)").fadeIn(2000);
    $(".img-wrap img:first-child").appendTo(".img-wrap");
  }, 4000);
});
</script>

<!--html-->
<div class="img-wrap md-6" style=""madding-right:1em;>
  <img id="slide0" src="progate_img1.jpg">
  <img src="progate_img2.jpg">
  <img src="progate_img3.jpg">
  <img src="progate_img4.jpg">
</div>

SlideShow解説

上部にスライドショーに関わるコードを示しています。

HTML

画像を表示させる領域を<div>で作成します。ここでは｢img-wrap｣というクラスを付けています。
｢img-wrap｣の子要素として､画像タグの<img>を表示させたい順番で記述していきます。

CSS スタイルシート

｢img-wrap｣に｢position:relative｣､子要素の｢img｣に｢position:absolute｣を設定し､各画像の配置する位置を揃えます。
また､子要素の｢img｣に｢width:100%｣を指定することで､｢img-wrap｣の｢width｣に応じて子要素の全ての画像の大きさを変更することができます。
これらの設定で､｢img-wrap｣内の同じ位置に画像が何枚も重なった状態になります。

jQuery

$('.img-wrap img:nth-child(n+2)’).hide();
の記述で､2枚目以降の画像を初期状態で非表示にしています。

setInterval(function() {~}, 4000);
では､括弧内の処理を4秒おきに繰り返し実行させています。

$(“.img-wrap img:first-child").fadeOut(2000);
は1枚目の画像を2秒かけてフェードアウトさせるように､
$(“.img-wrap img:nth-child(2)").fadeIn(2000);
では2枚目の画像を2秒かけてフェードインするように命令しています。

$(“.img-wrap img:first-child").appendTo(“.img-wrap");
の記述で､画像の1枚目を｢img-wrap｣内の最後に移動させるように命令しています。

jQuery.

SlideShow

SlideShow解説

HTML

CSS スタイルシート

jQuery