Question

如何向此js添加计时器，以便在'x'时间后图像会自动更改。目前，通过带有'rel'属性的'a href'进行更改，但仍需要具有'rel'的功能。

js：

$(document).ready(function (){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').css({left:-1476*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div mystuff (here 160) ------ */
        $('#button a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    }); 
});

HTML：

<div id="myslide">
<div class="cover">

    <div class="mystuff">
        <img src="images/header_01.jpg" rel="1"></img>
        <img src="images/header_02.jpg" rel="1"></img>
        <img src="images/header_03.jpg" rel="1"></img>
    </div>
</div>

Answer 1

好吧，我无法确切地看到你想要做什么，但.delay()可能正是你所寻找的。它在jQuery中修改动画队列而不会暂停代码的执行，因此您应该能够在动画尚未运行时更改有关图像的其他内容。

如果您还询问如何进行轮换（以适用于.delay()的方式），我建议jquery-animate-css-rotate-scale。查看自述文件以获取有关如何使用它的完整说明，但是对于您想要执行的操作，需要包含几个JavaScript文件，然后：

$('#image').delay(x).rotate(d);

给出x秒的延迟和d度。当然，你可以做更复杂的事情。

修改

我刚刚意识到你可能没有意图制作动画。在这种情况下，您应该使用同一作者的其他补丁，jquery-css-transform做这样的事情：

$('#image').delay(x).queue(function () { $('#image').css({transform: 'rotate(165deg)'}); });

这使得jQuery像动画一样应用css转换，因此可以延迟，但实际上没有任何动画。

此外，在作者的个人网站上，如果您依靠jQuery将变换属性作为六值转换矩阵返回，则有一个重要的注意事项。他的补丁将其返回到1.4.3之前的功能，以返回转换字符串（例如'rotate(90deg)'）。这适用于动画和非动画解决方案。

编辑2：

我刚刚看到您可能不想动态旋转图像的评论，只是定期切换图像。为此，只需使用我上面的延迟示例，但替换以您想要的方式替换图像而不是css转换的内部函数。如果是这种情况，请忽略jQuery插件和我提到的限制。

js旋转图像计时器

1 个答案: