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/

jQuery滑动标题和更改图像

1 个答案: