javascript繼續滑塊

Question

嗨:)我寫了一個簡單的img滑塊，我的問題是當它到達滑塊的末端時，它會停止... 我需要的是在滑塊末尾連續顯示在滑塊 和continu直到onkeyup事件觸發滑動第一張圖片...

任何幫助表示讚賞:)

這裏是我的代碼：

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

想象一下你的滾動圖片列表是這樣設立的， E用戶正在瀏覽的最後一個項目：

<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滑塊插件如何處理它。

僞代碼，你可能有這樣的事情：

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

有關詳細信息，我建議看jCarousel源代碼。

如果您包含示例Tlist.txt文件，則測試代碼並提供更具體的答案會更容易。