간단 한 그림 전환 코드 를 만들다.

간단 한 그림 전환 코드 를 만들다.
인터넷 에서 큰 남자 들 의 코드 는 나 같은 초보 자 에 게 너무 어 려 운 것 같 아. 레이아웃 만 봐 도 오래 봤 어. 나 는 내 가 만 든 아주 간단 한 순수 js 코드 를 썼어.

  var i =1;                     //        
        //      
        function qie(number) {            //                 onclick
            if(number==1){i--;}       //number html    ，1     ，  2     
            if(i<1){i=5;}                                                               
            if(number==2){i++;}
            if(i>5){i=1;}
            document.getElementById('bbb').src=("ima/"+i+".jpg"); 
  //bbb         dom   id，src    jpg，
  //                ，   png   png ok ，    ！！
  //           ，             1 2 3 4  5，     1.jpg，2.jpg...5.jpg
  //              ，    ，         
        }
        //  setInterval    
        setInterval(zhidong,5000);//5s    
        function zhidong() {
            i++;
            if(i>5){i=1;} //              
            document.getElementById('bbb').src=("ima/"+i+".JPG");
        }

html

<img id="bbb" src="ima/1.jpg"></img>                   //           ，     
<button onclick="qie(1)"></button>   //    
<button onclick="qie(2)"></button>   //    

그림 의 자동 전환 과 클릭 전환 그림 을 html 동급 디 렉 터 리 에 있 는 ima 폴 더 에 놓 을 수 있 습 니 다. 또한 그림 의 파일 이름 은 1. jpg, 2. jpg 의 순서대로 숫자 이 고 접미사 의 이름 도 같 아야 합 니 다. 이 글 의 코드 를 따 르 면 그림 은 5 장 을 채 워 야 합 니 다.
2019.12.24 마지막 으로 1 년 여의 학습 에 더 많은 선진 적 인 방법 이 있 지만 이전의 전환 방식 에 따라 최 적 화 를 했 지만 그렇게 하 자.

var s = [
   'aaa.jpg',    //   s              
   'ksksk.png'
]
var i = 0 ;  //   
//    
setInterval(()=>{
  i++;
  if(i>s.length-1){i = 0}
  document.getElementById('bbb').src=`ima/${s[i]}`;  //ima     ，    
                            //            ，  jq，     
}
,5000)

 //      
function qie(number) {           
   if(number==1){i--;}       
   if(i<1){i=5;}                                                               
   if(number==2){i++;}
   if(i>5){i=1;}
   document.getElementById('bbb').src=`ima/${s[i]}`
}

새로운 코드 의 사용 원 리 는 똑 같 습 니 다. 현재 의 관점 에서 볼 때 이런 방법 은 특별히 좋 지 않 습 니 다. 그림 이 너무 크 거나 네트워크 가 좋 지 않 으 면 bug 가 나 올 것 같 습 니 다.