Анимировать HTML список следующая / предыдущая фиксированная длина

Question

Анимировать HTML список следующая / предыдущая фиксированная длина

0

Имея список 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>

Хотите отображать только три элемента одновременно, и когда пользователь нажимает на правую/левую кнопку, будут отображаться следующие/предыдущие три элемента. И когда в списке нет alttleast first/last three items, будет отображаться черное изображение. Условие состоит в том, что список должен отображаться как минимум на 3 элемента.

Вот моя скрипка. http://jsfiddle.net/9sLJQ/

Nishant Nawarkhede 19 дек. 2013, в 06:02

Источник

0

В чем проблема / вопрос?
ram 19 дек. 2013, в 04:49
0

Хотите отображать только три элемента одновременно, и когда пользователь нажимает правую / левую кнопку, будут отображаться следующие / предыдущие три элемента. И когда в списке нет по крайней мере первых / последних трех элементов, будет отображаться черное изображение. Условие состоит в том, что список должен отображать как минимум 3 элемента.
Nishant Nawarkhede 19 дек. 2013, в 04:57

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Хотите отображать только три элемента одновременно, и когда пользователь нажимает правую / левую кнопку, будут отображаться следующие / предыдущие три элемента. И когда в списке нет по крайней мере первых / последних трех элементов, будет отображаться черное изображение. Условие состоит в том, что список должен отображать как минимум 3 элемента.

John S · Accepted Answer · 2013-12-19T02-44-00.000Z

Не могли бы вы добавить элементы <li> с черными изображениями в конец списка, чтобы длина списка всегда была кратной трем?

Затем измените:

counter++;

Для того, чтобы:

counter += showNum;

И измените:

counter--;

Для того, чтобы:

counter -= showNum;

Фактически, если вы просто изменяете код, ваша скрипка прекрасно работает без добавления черных изображений. Возможно, они вам не нужны.

Спасибо, а что, если хотите сделать это по кругу?
@Nishant - Возможно, вы уже решили эту проблему, но вот обновленный jsfiddle .