jQuery анимировать следующее изображение в div

У меня есть несколько изображений в div, которые я пытаюсь, когда я нажимаю следующую кнопку, анимировать следующую в div

В этом div у меня также есть кнопки «предыдущий» и «следующий», которые я явно не хочу анимировать.

<div class="work">
<a href="#" class="rightButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/right.png" /></a>
<a href="#" class="leftButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/left.png" /></a>
<a href="#" class="1"><img class="topLeft" src="http://i.stack.imgur.com/JQFbb.jpg" /></a>
<a href="#" class="2"><img class="topRight" src="http://i.stack.imgur.com/l5OPs.jpg" /></a>
<a href="#" class="3"><img class="bottomLeft" src="http://i.stack.imgur.com/okxQz.jpg" /></a>
<a href="#" class="4"><img class="bottomRight" src="http://i.stack.imgur.com/4uPHw.jpg" /></a>
</div>

Мой jQuery, который на самом деле не работает

    // prevent click jump
$('a').click(function() {
    return false;
});

// do work
$('.work > .leftButton').click(function() {

    //animate to previous image in the list
    $(this).siblings().prev().show();

});

$('.work > .rightButton').click(function() {

    //animate to next image in the list
    $(this).siblings().next().show();

});

Есть ли способ анимировать следующее изображение, которое не имеет класса leftButton или rightButton.

Также есть ли способ, чтобы, если я нахожусь на первом изображении, оно перешло к последнему изображению в div?

Вот ссылка на jsFiddle, который у меня есть

Любые идеи?


jquery next jquery-animate
person Jamie Taylor    schedule 19.02.2011    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Отредактировано для прокрутки изображений:

Это требует некоторых изменений в вашей разметке, но позволит прокручивать изображения влево/вправо:

HTML:

<div class="work">
    <div class="nav">
        <a href="#" class="rightButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/right.png" /></a>
        <a href="#" class="leftButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/left.png" /></a>       
    </div>
    <div class="scroller">
        <div class="items">
            <a href="#" class="1"><img class="topLeft" src="http://i.stack.imgur.com/JQFbb.jpg" /></a>
            <a href="#" class="2"><img class="topRight" src="http://i.stack.imgur.com/l5OPs.jpg" /></a>
            <a href="#" class="3"><img class="bottomLeft" src="http://i.stack.imgur.com/okxQz.jpg" /></a>
            <a href="#" class="4"><img class="bottomRight" src="http://i.stack.imgur.com/4uPHw.jpg" /></a>
        </div>
    </div>
</div>

Соответствующий CSS:

div.work { background-color: #ddd; height:240px; position: relative; width:300px;  margin-left:10px}
div.items { position:relative; width: 1000em; height: 240px; }
div.scroller { overflow: hidden; width: 300px; height: 100%; }

JavaScript:

$('.work .leftButton').click(function() {
    var $items = $(".items");
    if ($items.position().left === 0) {
        $items.css("left", "-300px");
        $items.children("a:last").prependTo($items);
    }
    $(".items").animate({
        left: "+=300px"
    });
});

$('.work .rightButton').click(function() {
    var $items = $(".items");
    if ($items.position().left === -900) {
        $items.css("left", "-600px");
        $items.children("a:first").appendTo($items);
    }

    $(".items").animate({
        left: "-=300px"
    });

});

По сути, происходит то, что есть фиксированная область просмотра (scroller) со скрытым переполнением, которое содержит очень длинный div (items), содержащий все изображения. Элемент div items просто анимируется при каждом нажатии следующей/предыдущей кнопки.

Сложная часть заключается в перемещении последнего элемента вперед и наоборот, когда достигается конец строки изображений. Это определяется жестко закодированными значениями, но, вероятно, может быть улучшено с помощью точного расчета.

Рабочий пример: http://jsfiddle.net/andrewwhitaker/6TLK2/3/

person Andrew Whitaker    schedule 19.02.2011
comment
@Эндрю Уитакер - это как раз то, что я имел в виду - я хотел бы анимацию слайда влево / слайд вправо, которую, надеюсь, я смогу включить в то, что вы мне дали - есть ли способ, чтобы, когда я доберусь до последнего, это вернется к началу? Спасибо - person Jamie Taylor; 20.02.2011
comment
@Jamie: Конечно, смотрите мой обновленный ответ. Я также поработаю над тем, чтобы заставить его скользить слева / справа, это немного сложнее. - person Andrew Whitaker; 20.02.2011
comment
@Andrew Спасибо, спасибо за помощь :) - person Jamie Taylor; 20.02.2011
comment
@Jamie: Пожалуйста, взгляните на мой обновленный ответ. Я заставил его скользить изображения влево и вправо по кругу. - person Andrew Whitaker; 20.02.2011
comment
+1 за хорошее решение и немного дальше. знак равно - person David says reinstate Monica; 20.02.2011

arrow_upward
2
arrow_downward

Если вы удалите «display: none» из CSS (в тегах img), вот код, который работает с вашей разметкой и поворачивает изображения на правой и левой кнопках:

<script type="text/javascript">
<!--
    $(function() {
        $("div.work >a:gt(2)").hide();

        $(".rightButton").click(function () {

            if ($("div.work >a:last").is(":visible"))
            {
                $("div.work >a:gt(1)").hide();
                $("div.work >a:eq(2)").show();
            } else {
                $("div.work >a:visible:gt(1)").hide().next().show();
            }
        });

        $(".leftButton").click(function () {

            if ($("div.work >a:eq(2)").is(":visible"))
            {
                $("div.work >a:gt(1)").hide();
                $("div.work >a:last").show();
            } else {
                $("div.work >a:visible:gt(1)").hide().prev().show();
            }
        });

    });



//-->
</script>
person Ritesh    schedule 19.02.2011
comment
OP = оригинальный постер (он же Джейми Тейлор). Я скопировал ваш Javascript и вставил его в jsFiddle Джейми, но это не сработало. - person Nimrod; 20.02.2011
comment
@Нимрод Спасибо! Я только что попробовал jsFiddle, и мой JS работает, если вы очистите CSS в правом верхнем поле. Итак, в CSS есть что-то противоречивое. В моем тестировании я не использовал CSS. - person Ritesh; 20.02.2011
comment
@Nimrod: JS работает, если вы просто удалите «display: none» из CSS, потому что в JS я скрываю/отображаю привязки, а не изображения. - person Ritesh; 20.02.2011
comment
@Ritesh - спасибо, это работает, если я уберу display:none css - спасибо - person Jamie Taylor; 20.02.2011
comment
@Ritesh: Тогда вам, вероятно, следует уточнить это в своем ответе, потому что вы заявили, что работает с вашей разметкой, хотя это не так. - person Nimrod; 20.02.2011
comment
@Нимрод Ты прав. Я имел в виду html-разметку. Также я пропустил часть jsFiddle. Это первый раз, когда я использовал jsFiddle. Сегодня я узнал кое-что новое (OP и jsFiddle)! Спасибо! - person Ritesh; 20.02.2011
comment
Спасибо Ритеш. Первоначально я проголосовал за этот ответ, но я с удовольствием удалю его, если вы упомянете исправление CSS как часть ответа. - person Nimrod; 20.02.2011