javascript - 动画 HTML 列表下一个/上一个固定长度

Question

将 html 列表作为 ,

<button id="leftArrow" class="fbtnFirst">Left</button>
<button id="rightArrow" class="fbtnLast">Right</button>
<div id="itemsListBox">
    <ul>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/A/Letter-AThumb.jpg" border="1">
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/B/Letter-BThumb.jpg" border="1">
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/C/Letter-CThumb.jpg" border="1">
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/D/Letter-DThumb.jpg" border="1">
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/E/Letter-EThumb.jpg" border="1">
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/F/Letter-FThumb.jpg" border="1">
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/G/Letter-GThumb.jpg" border="1">
        </li>
        <li>
            <img src="http://www.kids-pages.com/folders/alphabet/H/Letter-HThumb.jpg" border="1">
        </li>
    </ul>
</div>

希望一次只显示三个元素，当用户点击右/左按钮时，将显示下一个/前三个元素。当列表至少没有第一个/最后三个元素时，将显示黑色图像。条件是列表应显示至少 3 个元素。

这是我的 fiddle 。 http://jsfiddle.net/9sLJQ/

Answer 1

你能加上<li>吗？带有黑色图像的元素到列表的末尾，因此列表的长度始终是三的倍数？

然后改变:

counter++;

收件人:

counter += showNum;

并改变:

counter--;

收件人:

counter -= showNum;

实际上，如果您只是更改代码，您的 fiddle 可以很好地工作而无需添加黑色图像。也许您不需要它们。