100文字でわかる百科事典『100文字百科』
ホームページの画像をJavaScriptを使って、自動的にふわっと切り替える方法

ホームページの画像をJavaScriptを使って、自動的にふわっと切り替える方法

2020-11-06
JavaScript

<head>内に下記ソースを挿入。

<style type=”text/css”>
#photo {
width: 500px;
height: 300px;
margin: 0 auto;
text-align: left;
overflow: hidden;
position: relative;
}
#photo img {
top: 0;
left: 0;
position: absolute;
}
</style>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.4.min.js”></script>
<script type=”text/javascript”>
$(function(){
var setImg = ‘#photo’;
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>

画像を表示したい箇所に下記ソースを挿入。

<div id=”photo”>
<img src=”gazou1.jpg” width=”500” height=”300” alt=””>
<img src=”gazou2.jpg” width=”500” height=”300” alt=””>
<img src=”gazou3.jpg” width=”500” height=”300” alt=””>
<img src=”gazou4.jpg” width=”500” height=”300” alt=””>
</div>

表示画像は、編集ファイルと同じフォルダに入れる。

※画像サイズは赤

※フェードスピードは青

※切り替わる時間は緑。現在の設定は5秒


参考サイト

自動的に「ふわっ」と切り替わる画像を作る方法

自動的に「ふわっ」と切り替わる画像を作る方法をお伝えします。画像が瞬間的に、切り…
toretama.jp