Question

我有一张图片列表。当每次我想要显示系列中的下一个图像时加载页面，以及当它再次重新加载时我想要更改下一个图像等。

请使用jQuery向我推荐一个解决方案。

由于

Answer 1

您应该考虑使用服务器端技术来执行此操作。但是，这可以通过jQuery，甚至是无库Javascript轻松完成。

使用cookie，我们可以存储当前图像计数，然后可以使用它来访问图像URL数组，用于在页面加载时更改图像。使用the cookie script from QuirksMode，我们有一个如下所示的脚本：

var images = ['img1.png', 'img2.png', 'img3.png', 'img4.png' ...],
    imageCount = parseInt(readCookie('image'), 10);

if(isNaN(imageCount)) imageCount = 0;

$('#thumbnail').attr('src', images[imageCount % images.length]);
createCookie('image', imageCount + 1, 30);

如果您使用的是vanilla Javascript，请将6 ^th行替换为：

document.getElementById('thumbnail').src = images[imageCount % images.length];

请在此处查看此脚本的演示：http://www.jsfiddle.net/yijiang/2cqqt/

Answer 2

我建议你使用插件循环。就像这样容易：

$('.slideshow').cycle({
        fx: 'fade'
    });

http://jquery.malsup.com/cycle/

或者如果你想要一个转盘：jcarousel

http://sorgalla.com/jcarousel/

如何使用.load（）使用jquery更改图像

2 个答案: