サンプル
Code
Code
<head>
<style>
#photo {
width: 823px;
height: 330px;
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>
<script type="text/javascript">
$('.img-wrap img:nth-child(n+2)').hide();
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>
</head>
<body>
<div id="photo">
<img src="https://sakurafudousan.co.jp/wp-content/uploads/2021/03/6333258975aa44e9d9faa51447bcd54b.jpg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2JIo3hnM8UXsAY0EM5p4CUY8DFr8iX8mqjJSxYhs5jtc-B9tU&s" alt="">
<img src="https://sakurafudousan.co.jp/wp-content/uploads/2021/03/6333258975aa44e9d9faa51447bcd54b.jpg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2JIo3hnM8UXsAY0EM5p4CUY8DFr8iX8mqjJSxYhs5jtc-B9tU&s" alt="">
<img src="https://sakurafudousan.co.jp/wp-content/uploads/2021/03/6333258975aa44e9d9faa51447bcd54b.jpg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2JIo3hnM8UXsAY0EM5p4CUY8DFr8iX8mqjJSxYhs5jtc-B9tU&s" alt="">
<img src="https://sakurafudousan.co.jp/wp-content/uploads/2021/03/6333258975aa44e9d9faa51447bcd54b.jpg" alt="">
</div>
</body>
