刷新时交换两个不同的图像/div

Question

我一直在研究如何在刷新时交换两个图像或 div。我找到了一些来源，但没有一个做我想让他们做的事情。这是我希望我的工作方式：

我有两个 div，其中包含图像。一个 div 高于另一个。顶部 div 将显示一个图像，底部 div 将显示不同的图像。我希望每次刷新或重新访问页面时，图像或 div 都会切换，以更有意义的为准。

这是我对广告的简单 CSS 编码（在我的侧边栏中）：

#sidebar {float:left; width:300px; min-height:400px; }

#sidebarhomenewsad1 { width:290px; height:580px; margin-bottom:10px; }

#sidebarhomenewsad2 { width:290px; height:580px; margin-bottom:10px; }

我使两个 div 完全相同，只是名称不同，因为我不知道刷新时的图像交换是否需要两个不同的 div。

回顾一下，我希望在刷新/重新访问页面时，两个不同的图像（一个在下面，一个在上面）相互切换/交换。

非常感谢任何帮助！ :)

Answer 1

您可以使用 cookie 来实现。第一次访问时，如果没有设置cookie（例如'upper_div_num'），你应该将第一个div显示为upper，并将cookie值设置为1。下次，你应该检查'upper_div_num'cookie，如果是则设置为2 1，如果设置为 2，则设置为 1。 PHP 或 Javascript 代码应检查此 cookie 值并相应地定位 div。

Answer 2

使用jQuery.cookie()

HTML

<img class="a" src="http://i.imgur.com/dCabSb.jpg" />
<img class="b" src="http://i.imgur.com/ZUTsGb.jpg" />​

JS

if (!$.cookie('currentImage')) {
    $.cookie('currentImage', '1')
} else {
    if ($.cookie('currentImage') == '1') {

        tmp = $('.a').attr('src');
        $('.a').attr('src', $('.b').attr('src'));
        $('.b').attr('src', tmp);

        $.cookie('currentImage', '2')
    } else {
        $.cookie('currentImage', '1')
    }
}​

小提琴 - http://jsfiddle.net/mrYaA/