0

我正在编写一个简单的图像滑块，我的问题是当它到达滑块的末端时它会停止。我需要的是在滑块的末尾继续，它将显示滑块中的第一个图像并继续滑动直到 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);
    }
})
4

1 回答 1

0

想象一下，您的可滚动图像列表是这样设置的，并且用户正在查看最后一项：

<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 文件，则可以更轻松地测试代码并提供更具体的答案。

于 2012-11-14T16:08:39.167 回答