jQuery скользящий заголовок и изменение изображения

Question

Я пытаюсь создать функцию, которая анимирует заголовок справа налево, а затем слева направо.

Вы можете увидеть начало этого здесь: http://opportunityfinance.net/Test/financeforum2013/

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

Вот код, который я использую до сих пор. Однако задержка jQuery в 10 секунд, похоже, не работает, и я не могу понять, как вызвать функцию снова, когда анимация будет завершена.

JQuery:

$(document).ready(function(){
    $(".header_right").html('<img src="images/1.jpg" alt="OFN" />');
    $(".header_left").html('<img src="images/2.jpg" alt="OFN" style="max-height: ' + $("div.header").height() + 'px' + ';" />');
    slide();
});

function slide(slideVar)
{
    slideVar = !slideVar ? 2 : slideVar;
    slideVar = slideVar > 5 ? 1 : slideVar;

    $(function () {
        var mrgLeft = parseInt($(".header_right").css('marginLeft'),10) == 0 ? $(".header_right").outerWidth() : 0;
        $(".header_left").html('<img src="images/' + slideVar + '.jpg" alt="OFN" style="max-height: ' + $("div.header").height() + 'px' + ';" />');

        $("img.hImage").delay("10000").animate({ marginLeft: mrgLeft + 'px' }, { duration: 3000, queue: false });
        $(".header_left").delay("10000").animate({ marginLeft: mrgLeft + 'px'}, { duration: 3000, queue: false });
        $(".header_right").delay("10000").animate({ 'right': '-' + mrgLeft + 'px'}, { duration: 3000, queue: false });
    });
    slideVar++;
}

Настройка HTML:

<div class="header">
    <img class="hImage" src="images/header.jpg" alt="Small Business Finance Forum" />
    <div class="header_right"></div>
    <div class="header_left"></div>
</div>

CSS:

.hImage
{
    width: 64%;
}

div.header_right
{
    position: absolute;
    display: block;
    right: -10px;
    top: 0px;
    width: 35.5%;
}

div.header_left
{
    position: absolute;
    display: block;
    left: -35.5%;
    top: 0px;
    width: 35.5%;
}

div.header
{
    box-sizing: border-box;
    background-color: #00457E !important;
    width: 100%;
}

По сути, я просто хочу сдвинуть главное изображение "header.jpg" влево и вправо, каждый раз меняя левое и правое изображение до 5.jpg включительно. Он должен зацикливаться от 1.jpg до 5.jpg. Но в основном я не могу понять, как исправить проблему с задержкой (поскольку она не работает) и сделать ее зацикленной в функции slide() после завершения анимации.

Может кто-нибудь, пожалуйста, помогите мне начать с этим?

Спасибо, парни:)

Answer 1

Я создал небольшой слайдер изображений, который вы можете использовать в качестве отправной точки. Он использует контейнер фиксированной ширины с идентификатором #container, Внутри находятся контейнеры для трех разных изображений. Вы можете изменить ширину всего этого в CSS, чтобы удовлетворить ваши потребности.

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

Смененные изображения взяты из image массив. Таким образом, альтернативные изображения отображаются на альтернативных сторонах. Таким образом, каждое второе изображение отображается справа... Это означает, что вам нужно будет использовать четное количество изображений в массиве или изменить скрипт.

вот скрипка

http://jsfiddle.net/Rgh2B/5/