window.onload = function(){
   
    //画像を配列に格納
    var pic =[
        'url(https://www.yatex.org/gitbucket/minosanjo/oishiimonotabetai/raw/master/cloak/cloak-20210909-2.png)',
        'url(https://www.yatex.org/gitbucket/minosanjo/oishiimonotabetai/raw/master/mamma-cafe-bremen/mammacafebremen-20210905-2.JPG)',
        'url(https://www.yatex.org/gitbucket/minosanjo/oishiimonotabetai/raw/master/tsukicafe/tsukicafe-20210918-1.png)'
        ]
        
    //要素をHTMLから取得
    var target = document.getElementById('slide'); //背景画像を取得し格納
    var right = document.getElementById('right'); //右矢印 >
    var left = document.getElementById('left'); //左矢印 <

    //クリックしたときに変わるようにカウント変数
    var count = 0;

    //クリックしたら画像変更
   function change(){
       target.style.backgroundImage = images[count];
    }

   //>をクリックしたらcountを+1する
   function goNext(){
       if(count == 2){ //画像の枚数-1
           count = 0;
       }else{
           count++;
       }
       change();
   }
   
   //<をクリックしたらcountを-1する
   function goBack(){
       if(count == 0){
           count = 2; //画像の枚数-1
       }else{
           count--;
       }
       change();
   }

   //クリックイベント addEventListener→イベント処理を実行
   right.addEventListener('click',goNext,false);
   left.addEventListener('click',goBack,false);
}