Change jQuery image src dynamically

问题

I saw just wondering how it would be possible to change a src every say 5 seconds,

I am using

$.backstretch("site.com/images/home5.jpg");

Is it possible to swap 'home5.jpg' with other image (say home6.jpg and home7.jpg) like a slideshow? I'm not sure how to change it dynamically

回答1:

If you wanted to change it every 5 seconds you'd need to use setInterval():

var loop = 1;
setInterval(function() {
    var imgNumber = loop % 5; // assuming there are 5 images.
    $.backstretch("site.com/images/home" + imgNumber + ".jpg");
    loop++;
}, 5000);

UPDATE

After reading the documentation it appear this functionality is built into the plugin already:

http://srobbin.com/jquery-plugins/backstretch/

Choose 'Using backstretch in a slideshow' for the code.

回答2:

For this you can use the JavaScript function setInterval.

回答3:

You can change the html of the object you've selected with .html().

$(#thing).html(" < img src='mypic.jpg' / >");

回答4:

You can use setInterval or a similar function to periodically change the image. To actually swap images, you can just call backstretch again. From the project page:

Version 1.2

You can now called backstretch twice, and it will replace the existing image.

So for example:

$.backstretch("site.com/images/home6.jpg");

回答5:

function slideSwitch() {

var $active = $('#slideshow IMG.active');

$active.src = //change src here (you can use array with src-s)// }

$(function() { setInterval( "slideSwitch()", 5000 ); });

来源：https://stackoverflow.com/questions/10415932/change-jquery-image-src-dynamically