<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秒
参考サイト
