トップ画像をフェイドアウトで変更

2021.04.17

以下のコードを<head>に追加

  • style部分をcssに記述するとブロックの配置がくずれる。トップ画像と次のブロックが重なってしまう。<head>に入れる必要あり。
  • class指定がオリジナルは　”#resizeimage”　だが認識されないので ”.resizeimage”とした。

<!--Top画像をフェードアウトで切り替え　styleをcss内に記述すると配置がくずれる-->  
<style type="text/css">
.resizeimage {
    width: 100%;
    height: 470px;;
    margin: 0 auto;
    text-align: left;
    overflow: hidden;
    position: relative; 
}

.resizeimage img {
    top: 0;
    left: 0;
    position: absolute;
}
</style>

<!--Top画像をフェードアウトで切り替えるためのJQuery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
    var setImg = '.resizeimage';
    var fadeSpeed = 1600;
    var switchDelay = 5000;

    $(setImg).children('img').css({opacity:'0'});
    $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

    setInterval(function(){
        $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
    },switchDelay);
});
</script> 
</head>

以下をfront-page.phpに記述
<image>を追加すれば入れ替わる画像数が増える。


<div class="resizeimage">
<img class="pc" src="<?php echo get_template_directory_uri(); ?>/images/kawanakouen6.png" alt="川名公園">　
<img class="pc" src="<?php echo get_template_directory_uri(); ?>/images/sunset.png" alt="川名公園">　

</div>

　　

【おしゃれ技】自動的に「ふわっ」と切り替わる画像を作る方法 (toretama.jp)