Question

在我的网站上（http://daaamnthisisfunny.blogspot.com/）我已经设置了一个图像幻灯片，每当用户点击右箭头时，它就会将他/她带到下一张图片，然后执行相反的操作单击上一个箭头时。问题是当用户刷新页面时，它会将幻灯片重置为第一个图像。我想做的是像（http://9gag.com/gag/1672046）这样的网站，每次用户点击下一个箭头时，网站的网址都会相应更改。你有什么想法我能做到吗？

这就是我在网站上使用的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="JavaScript">

            var NumberOfImages = 10
            var img = new Array(NumberOfImages)

            img[0] = "http://damnthisfunny.site40.net/1.jpg"
            img[1] = "http://damnthisfunny.site40.net/2.jpg"
            img[2] = "http://damnthisfunny.site40.net/3.jpg"
            img[3] = "http://damnthisfunny.site40.net/4.jpg"
            img[4] = "http://damnthisfunny.site40.net/5.jpg"
            img[5] = "http://damnthisfunny.site40.net/6.jpg"
            img[6] = "http://damnthisfunny.site40.net/7.jpg"
            img[7] = "http://damnthisfunny.site40.net/8.jpg"
            img[8] = "http://damnthisfunny.site40.net/9.jpg"
            img[9] = "http://damnthisfunny.site40.net/10.jpg"

            var imgNumber = 0
            function NextImage()
            {
                imgNumber++
                if (imgNumber == NumberOfImages)
                    imgNumber = 0
                document.images["VCRImage"].src = img[imgNumber]
            }
            function PreviousImage()
            {
                imgNumber--
                if (imgNumber < 0)
                    imgNumber = NumberOfImages - 1
                document.images["VCRImage"].src = img[imgNumber]
            }


</script>



<body>
<center>

<img name="VCRImage" src="http://damnthisfunny.site40.net/1.jpg" /></dr>
<br />
<a href="javascript:PreviousImage()">
<img border="0" src="left1.jpg" /></a>
<a href="javascript:NextImage()">
<img border="0" src="right1.jpg" /></a>
</center>
</body>
</html>

Answer 1

是的，您可以将当前图像编号保存在cookie中。因此，只要页面加载，您就会先检查是否存在cookie。如果有，则将当前图像设置为cookie中的数字。

顺便说一下，这一切都是在javascript中完成的。

实施例

var imgNumber = getCookie("lastImage") || 0; 
// where getCookie is a function to retrieve cookie value

<强>更新

这里有2个手部功能：

// get Cookie
function getCookie(szName){
    var szValue = null,
    cookie = document.cookie,
    arr.arr2;
    if (cookie){ // only if cookie exists
        arr = cookie.split((escape(szName) + '='));
        if(2 <= arr.length){
        arr2 = arr[1].split(';');
        szValue = unescape(arr2[0]);
        }
    }
    return szValue;
}

// set Cookie
function setCookie(szName, szValue, szExpires, szPath, szDomain, bSecure) {
    var szCookieText = escape(szName) + '=' + escape(szValue),
    date;
    if(!szExpires) // default expiration date : 1 year
    {
        date = new Date();
        date.setTime(date.getTime()+(365*24*60*60*1000));
        szExpires = date.toGMTString();
    }

    szCookieText += (szExpires ? '; EXPIRES=' + szExpires : '');
    szCookieText += (szPath ? '; PATH=' + szPath : '');
    szCookieText += (szDomain ? '; DOMAIN=' + szDomain : '');
    szCookieText += (bSecure ? '; SECURE' : '');
    document.cookie = szCookieText;
}

Answer 2

只是一个想法，如何在页面卸载上设置一个cookie值？可以工作，但我必须测试我建议使用jquery进行事件： http://api.jquery.com/unload/

然后进行cookie解析使用 http://archive.plugins.jquery.com/project/Cookie

我不肯定这会起作用

Answer 3

一种方法是使用HTML5的replaceState方法。这允许您更改用于重新加载页面的URL。这取决于服务器在幻灯片中为给定的URL发送正确的图像。虽然下一个和上一个链接似乎链接到那些相同的URL，但您实际上会在后台调用replaceState以避免重新加载页面。

对于不支持replaceState的浏览器，您仍然可以更改URL的锚点。对于支持:target CSS伪类的浏览器，幻灯片可以完全用CSS编写。否则，您需要根据锚点显示正确的图像。某些浏览器提供hashchange事件，允许您检测用户更改锚点（例如，通过单击返回）。

刷新网页时如何使幻灯片中的当前图像保持不变？

3 个答案: