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个项目。

这是我的小提琴。 http://jsfiddle.net/9sLJQ/

Answer 1

您可以将带有黑色图片的<li>元素添加到列表的末尾，这样列表的长度始终是三的倍数吗？

然后改变：

counter++;

要：

counter += showNum;

并改变：

counter--;

要：

counter -= showNum;

实际上，如果您只是更改代码，那么您的小提琴可以很好地运行，而无需添加黑色图像。也许你不需要它们。

动画HTML列表next / prev固定长度

1 个答案: