'x'时间后javascript图像发生变化 [英] javascript image change after 'x' amount of time

问题描述

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

How would I go about adding a timer to this js so images would change automatically after 'x' amount of time. As it stands the change is made via 'a href' with the 'rel' attribute, but that function with the 'rel' is still required.

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>

推荐答案

您应该考虑使用setInterval和一组图像来更改源。这会强制图像连续循环

You should consider using setInterval and and an array of images to change the source. This will force the image to loop continuously

var images = ['header_01.jpg','header_02.jpg','header_03.jpg'], 
    index = 0, // starting index
    maxImages = images.length - 1;
var timer = setInterval(function() {
    var curImage = images[index];
    index = (index == maxImages) ? 0 : ++index;
    // set your image using the curImageVar 
    $('div.mystuff img').attr('src','images/'+curImage);
 }, 1000);

这篇关于'x'时间后javascript图像发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！