JavaScript를 사용하는 이미지 배열

Question

JavaScript를 사용하여 이미지 배열을 만드는 데 도움이 필요합니다. 나는 그들 사이를 순환하기 위해 src 속성을 사용하여 순환 할 일련의 이미지를 생성해야한다. 그런 다음 이미지를 다음 및 이전 버튼으로 순환시켜야합니다. 이미지는주기를 반복해야합니다. 다른 말로하면 끝내지 마십시오. 다음을 클릭하면 이미지의 끝에 도달하면 첫 번째 이미지부터 다시 시작해야합니다.

누군가이 간단한 코드를 작성해 주시겠습니까? 나는 정말로 감사 할 것입니다.

Answer 1

나는 지루 했었고 나는 이것들 중 하나를 만들지 않았다. http://jsfiddle.net/grantk/pHdAN/

<div id="images" style="height:300px;"> 
    <img src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg" /> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" /> 
    <img src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png" /> 
</div> 
<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a> 

<script> 
var imgArr = document.getElementById('images').getElementsByTagName('img'); 

//Hide all images except first 
for(var i=1; i<imgArr.length; i++){ 
    imgArr[i].style.display = "none"; 
} 
i=0; 

document.getElementById('prev').onclick = function(){ 
    if(i===0){ 
     imgArr[i].style.display = "none"; 
     i=imgArr.length-1; 
     imgArr[i].style.display = ""; 
    } 
    else{ 
     imgArr[i].style.display = "none"; 
     i--; 
     imgArr[i].style.display = ""; 
    } 
} 

document.getElementById('next').onclick = function(){ 
    if(i===imgArr.length-1){ 
     imgArr[i].style.display = "none"; 
     i=0; 
     imgArr[i].style.display = ""; 
    } 
    else{ 
     imgArr[i].style.display = "none"; 
     i++; 
     imgArr[i].style.display = ""; 
    } 
} 
</script>