test1.html 

		<!DOCTYPE html>
		<html>
		    <head>
		        <meta charset="utf-8">
		        <link rel="stylesheet" href="test7.css">
		        <title>slide</title>
		        <script src="../jquery-3.4.1.min.js"></script>
		    </head>
		    <body>
		 
		        <div id="frame">
		        <img src="img/1.jpg"><!--最初から入れておく手もある-->
		        </div>
		        <p><button id="btn">次の写真</button></p>
		        
		        <script src="test7.js"></script>
		    </body>
		</html>

test7.css 

			body{
			    background:#333;
			}
			#frame{
			    position:relative;
			    width:500px;
			    height:332px;
			    margin:3rem auto;
			    border:double 5px #555;
			    /*background-image:url('img/1.jpg');*/
			}

			#frame img{
			    position:absolute;
			}
			p{
			    text-align:center;
			}

test7.js 

$(function(){
    console.log('foo');
    var hoge=1;//いま何枚目か
    
    for(i=5; i>0; i--){
        var elehoge = $('<img>').attr('src','img/'+i+'.jpg');
        elehoge.attr('id','img'+i);/*属性追加*/
        console.log(elehoge);        
        $('#frame').append(elehoge);
    }
    
        $('#btn').on('click',function(){
            if(hoge<5){
                    $('#img'+hoge).animate({'width':'50px','opacity':0},500,function(){
                    hoge++;
                    });
            }else{//5枚目だった
                    $('#img'+hoge).animate({'width':'50px','opacity':0},500,function(){
                    hoge=1;
                    $('#frame img').css({'opacity':1,'width':'100%'});/*全部元に戻す*/
                    });
            }
            console.log(hoge);
        });
        
});

back