자바 스크립트 계속 슬라이더

Question

안녕하세요 :) 간단한 img 슬라이더를 쓰고 내 문제는 그것이 멈추는 슬라이더의 끝에 도달했을 때입니다 ... 내가 필요한 것은 슬라이더의 끝에서 계속 표시하는 것입니다

var second_array = new Array(); 
function LoadImageList() { 
    var s = ""; 
    var ia = 0; 
    var std = ""; 
    var etd = ""; 
    var paths = FSO.OpenTextFile("bin\\Tlist.txt") 

    while (!paths.AtEndOfStream) { 
    var tot = ia++; 
    content = paths.ReadLine(); 
    var newNameN = content.split(";"); 
    var curID = "t"+tot 
    var forID = "t"+parseFloat(tot+1) 
    var bacID = "t"+parseFloat(tot-1) 

     second_array[tot] = "<td nowrap style=\"padding:10px;\"><font style=\"display:none;\">"+newNameN[0]+"</font><img src=\""+newNameN[2]+"\\folderS.jpg\" id=\""+curID+"\" tabindex=\""+tot+"\" style=\"width:217px; height:322px; border:solid 5px silver; border-radius:10px; box-shadow: 0 0 15px #fff; cursor: pointer;\" onMouseOver=\"this.style.border='solid 5px red';\" onMouseOut=\"this.style.border='solid 5px silver';\"></td>"; 

    } 
    second_array.sort(); 
     var tempList = second_array.join(""); 
      thumb.innerHTML = "<table cellpadding=0 cellspacing=0 border=0><tr>"+tempList+"</tr></table>"; 
} 

var defaultStep=1; 
var step=defaultStep; 
var timerLeft; 
var timerRight; 

function scrollDivLeft(id) { 
    document.getElementById(id).scrollLeft+=Math.round(step*100); 
    timerLeft=setTimeout("scrollDivLeft('"+id+"')",1); 
} 

function scrollDivRight(id) { 
    document.getElementById(id).scrollLeft-=Math.round(step*100); 
    timerRight=setTimeout("scrollDivRight('"+id+"')",1); 
} 

document.body.addEventListener('keydown', function (e) { 
if (e.keyCode=='37') { 
    clearTimeout(timerRight); 
    scrollDivRight("thumb"); 
    } 
    else if (e.keyCode=='39') { 
    clearTimeout(timerLeft); 
    scrollDivLeft("thumb"); 
    } 
}) 

document.body.addEventListener('keyup', function (e) { 
    if (e.keyCode=='37') { 
    clearTimeout(timerRight); 
    } 
    else if (e.keyCode=='39') { 
    clearTimeout(timerLeft); 
    } 
}) 

Answer 1

스크롤 이미지의 목록을 상상해보십시오 : 어떤 도움이 감사

슬라이더 과 onKeyUp에 이벤트가 발생 될 때까지 밀어 연속 주에서 처음 IMG ... :) 여기

내 코드입니다 이런 식으로 설정되고, th 사용자가 마지막 항목을보고 있습니다.

<li>Img 1</li> (out of view) 
<li>Img 2</li> (out of view) 
<li>Img 3</li> (out of view) 
<li>Img 4</li> (Visible item) 

이 시점에서 슬라이더 기능을 원하는대로 선택할 수 있습니다. 가장 간단한 방법은 사용자가 다음을 클릭 할 때 첫 번째 이미지로 다시 스크롤하는 것입니다. 그것은 당신에게 일종의 "연속 스크롤"을 줄 것이지만 어떤 아이템이 처음이고 어떤 것이 마지막인지는 매우 분명합니다.

또 다른 옵션은 첫 번째 이미지를 목록의 끝에 추가하는 것입니다. 이 경우, 목록은 실제로 사용자가 마지막 이미지를 볼 때 다음과 같이 보일 것이다 : 당신은 스크롤 로직을 별도로 목록 항목을 복제 할 수있는 로직을 처리 할 수 ​​

<li>Img 2</li> (out of view) 
<li>Img 3</li> (out of view) 
<li>Img 4</li> (Visible item) 
<li>Img 1</li> (Clone of first item appended to end of list, out of view) 

. 이것은 일반적으로 일반적으로 사용되는 jQuery 슬라이더 플러그인이 처리하는 방법입니다. 자세한 내용은 내가 jCarousel 소스 코드를 찾고 제안

function scrollDivRight(id) { 
     if (current item position is 2nd to last) { 
      Clone & remove item1 
      Append item1 to end 
     }   
     scrolling logic 
    } 

:

는 의사 당신이 뭔가를 할 수도 있습니다.

예제 Tlist.txt 파일을 포함하면 코드를 테스트하고보다 구체적인 대답을 제공하는 것이 더 쉬울 것입니다.