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文件，则测试代码并提供更具体的答案会更容易。