jQuery滑动标题和改变图像

Question

我正在尝试创建一个函数，使标题从右到左，然后从左到右产生动画。

您可以在这里看到它的开头:http://opportunityfinance.net/Test/financeforum2013/

当页面加载时，它开始将标题滑动到右侧，显示左侧的图像，然后返回，显示右侧的图像。我需要一遍又一遍地继续这样做。并且每次左右的图像都需要改变。我有 5 张图像，我想循环浏览它们作为侧面图像。小型企业金融论坛图像应在两个不断变化的侧面图像之间保持不变，并且仅从右到左移动，然后从左到右移动。

这是我迄今为止使用的代码。然而，10 秒的 jQuery 延迟似乎不起作用，而且我不知道如何在动画完成时再次调用该函数。

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(包括 5.jpg)。它应该从 1.jpg 循环到 5.jpg。但主要是，我不知道如何解决延迟问题(因为它不起作用)并在动画完成时使其在幻灯片()函数中循环。

有人可以帮我开始做这个吗？

谢谢大家:)

Answer 1

我创建了一个小图像 slider ，您可能想将其用作起点。它使用一个固定宽度的容器，其 ID 为#container。其中包含三个不同图像的容器。您可以在 css 中更改所有这些的宽度以满足您的需要。

动画使用完整函数来调用 swapImg 函数。这会根据图像容器刚刚移动的方向交换左图像或右图像。

交换的图像取自image数组。因此，交替图像会显示在交替的两侧。因此，每隔一个图像就会显示在右侧...这意味着您将需要在数组中使用偶数个图像，或者更改脚本。

这是 fiddle

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