I've found some javascript code that layers photos on top of each other when you click on them.
Rather than having to click I'd like the function to automatically run every 5 seconds. How can I change this event to a timed one:
$('a#nextImage, #image img').click(function(event){
Full code below. Thanks
$(document).ready(function() {
$('#description').css({ 'display': 'block' });
$('#image img').hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); }
);
$('a#nextImage, #image img').click(function(event) {
event.preventDefault();
$('#description p:first-child').css({ 'vi开发者_JAVA技巧sibility': 'hidden' });
if($('#image img.current').next().length) {
$('#image img.current').removeClass('current').next().fadeIn('normal').addClass('current').css({ 'position': 'absolute' });
}
else{
$('#image img').removeClass('current').css({ 'display': 'none' });
$('#image img:first-child').fadeIn('normal').addClass('current').css({ 'position': 'absolute' });
}
if($('#image img.current').width() >= ($('#page').width() - 100)) {
xPos = 170;
}
else {
do {
xPos = 120 + (Math.floor(Math.random() * ($('#page').width() - 100)));
} while(xPos + $('#image img.current').width() > $('#page').width());
}
if($('#image img.current').height() >= 300) {
yPos = 0;
}
else{
do {
yPos = Math.floor(Math.random() * 300);
} while(yPos + $('#image img.current').height() > 300);
}
$('#image img.current').css({ 'left' :xPos, 'top' :yPos });
});
});
I'd try setInterval function. It runs something every N milliseconds. It looks like:
setInterval(function() {
alert('5 seconds over!');
}, 5000);
$(document).ready(function() {
$('#description').css({ 'display': 'block' });
$('#image img').hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); }
);
setInterval(function() {
$('#description p:first-child').css({ 'visibility': 'hidden' });
if($('#image img.current').next().length) {
$('#image img.current').removeClass('current').next().fadeIn('normal').addClass('current').css({ 'position': 'absolute' });
}
else{
$('#image img').removeClass('current').css({ 'display': 'none' });
$('#image img:first-child').fadeIn('normal').addClass('current').css({ 'position': 'absolute' });
}
if($('#image img.current').width() >= ($('#page').width() - 100)) {
xPos = 170;
}
else {
do {
xPos = 120 + (Math.floor(Math.random() * ($('#page').width() - 100)));
} while(xPos + $('#image img.current').width() > $('#page').width());
}
if($('#image img.current').height() >= 300) {
yPos = 0;
}
else{
do {
yPos = Math.floor(Math.random() * 300);
} while(yPos + $('#image img.current').height() > 300);
}
$('#image img.current').css({ 'left' :xPos, 'top' :yPos });
}, 5000);
});
加载中,请稍侯......
精彩评论