Js旋转图像定时器

js rotating image timer

本文关键字：定时器 图像 旋转 Js      更新时间：2023-09-26

我该如何在这个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>

嗯，我不太明白你想做什么，但.delay()可能是你正在寻找的。它在jQuery中修改动画队列而不暂停代码的执行，所以你应该能够在动画尚未运行时更改图像的其他内容。

如果您还在询问如何进行旋转(以与.delay()一起工作的方式)，我推荐jquery- animation -css-rotate-scale。查看readme以获得关于如何使用它的完整说明，但对于您想要做的事情，这将是包括两个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插件和我提到的限制。

相关文章：