Question

一个简单的问题我想但不是一个我能找到很多关于baring的东西我对jquery不太好。

我想简单地提供图像：

<img class="banner-rotate" src="images/image1.gif" />
<img class="banner-rotate" src="images/image2.gif" />
<img class="banner-rotate" src="images/image3.gif" />
<img class="banner-rotate" src="images/image4.gif" />

在加载页面时，我想显示第一张图片，然后在每次刷新页面时按顺序循环显示。

任何帮助非常感谢。

Answer 1

您需要将以前的客户端状态存储在某个位置（通常是cookie或本地存储），以便每次加载页面时都可以前进到下一个图像。此示例使用cookie值：

HTML：

<img class="banner-rotate" src="images/image1.gif" />
<img class="banner-rotate" src="images/image2.gif" />
<img class="banner-rotate" src="images/image3.gif" />
<img class="banner-rotate" src="images/image4.gif" />

CSS：

/* all banner images hidden by default */
.banner_rotate {display: none;}

使用Javascript：

// cookie reading/writing library
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function showNextBannerImage() {
    var imgs = $(".banner-rotate");
    var index = 0;
    var prev = readCookie("bannerIndex");
    if (prev) {
        var num = parseInt(prev, 10);
        if (!isNaN(num) && num < imgs.length - 1) {
            index = num + 1;
        }
    }
    imgs.eq(index).show();
    createCookie("bannerIndex", index, 365);
}

showNextBannerImage();

注意：我在您展示时使用了您的HTML，但您不必加载所有图片以便只显示一个。您可以计算所需的图像URL并使用javascript创建具有相应URL的图像标记，然后仅加载该图像。

Answer 2

您需要使用localStorage / sessionStorage或cookies或ajax请求来记住上次显示的图像。

您还只需要一个img - 标记，您可以相应地更改src属性。

一个简单的解决方案是：

var index = localStorage.getItem("index");
var imageCount = 4;
if ( index === null){
    index = 1;
    localStorage.setItem("index",index);
}
else{
    var newVal = index%imageCount+1;
    localStorage.setItem("index",newVal);
}

$(".banner-rotate").attr("src","images/image"+index+".gif");

请注意，这仅适用于现代浏览器，因为旧浏览器中不提供localStorage（主要是IE＆lt; = 7）。对于那些浏览器，您需要通过cookie进行后备。

Answer 3

我认为你并不想记住页面刷新前显示的最后一张图片。你想要的只是在每个页面加载时循环浏览图像。我对吗？

如果是，您可以执行此操作 - http://jsfiddle.net/BHrHS/

var d;

$("img.banner-rotate").each(function(i) {
    d = i * 2000;

    $(this).delay(d).fadeIn(1000, function() {
        $(this).fadeOut(1000);
    });
});

在页面加载时交换图像

3 个答案: