我将如何向此 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>
您应该考虑使用 setInterval 和图像数组来更改源。这将迫使图像连续循环
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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)