Question

我想制作一个图像浏览器（对于我的网站），就像Facebook中的那个（旧的）。当用户单击下一个或后一个箭头时，它将更改图片和页面的URL。

这是我想要的一个例子（http://www.facebook.com/pages/Forest-Ville/307556775942281）

最重要的是，我希望每次点击都会重新加载页面（网址，评论框，广告等）我不想使用任何Cookie。现在我正在使用它，但它与我想要的完全不同。

<html>
<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

我建议您为这样的项目使用jQuery插件，然后根据自己的需要进行自定义。

这是一个让你凝视的链接：http://www.designsmag.com/2011/06/50-jquery-image-gallery-tutorials-and-plugins/

Answer 2

如果您想每次都重新加载页面，只需更新location.href并附加一个表示您要加载的图像的哈希值：

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

<script type="text/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 imgNum = parseInt(location.hash.substring(location.hash.indexOf('img=')+4));
    if (isNaN(imgNum) || imgNum < 1 || imgNum > NumberOfImages)
        imgNum = 1;
    document.getElementById('theImg').src = img[imgNum];

    function NextImage()
    {
        location.href = 'this.html#img='+(imgNum+1);
    }
    function PreviousImage()
    {
        location.href = 'this.html#img='+(imgNum-1);
    }
</script>

如何制作图像查看器？

2 个答案: