2

我正在尝试创建一个从右到左，然后从左到右为标题设置动画的函数。

你可以在这里看到它的开始： 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。它应该从 1.jpg 循环到 5.jpg。但主要是，我无法弄清楚如何解决延迟问题（因为它不起作用）并在动画完成时使其在 slide() 函数中循环。

有人可以帮我开始吗？

多谢你们 ：）

4

1 回答 1

0

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

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

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

这是小提琴

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

于 2013-05-06T08:37:32.130 回答