Javascript 如何制作图像查看器？_Javascript_Image

Javascript 如何制作图像查看器？

javascript image

Javascript 如何制作图像查看器？,javascript,image,Javascript,Image,我想为我的网站制作一个像Facebook（旧的）那样的图像查看器。当用户单击“下一步”或“后退”箭头时，它将更改页面的图片和URL 这是我想要的一个例子（）最重要的是，我希望每次点击页面时都能重新加载新内容（URL、评论框、广告等），我不想使用任何cookie。现在我正在使用这个，但它与我想要的完全不同 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

我想为我的网站制作一个像Facebook（旧的）那样的图像查看器。当用户单击“下一步”或“后退”箭头时，它将更改页面的图片和URL

这是我想要的一个例子（）

最重要的是，我希望每次点击页面时都能重新加载新内容（URL、评论框、广告等），我不想使用任何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>


无标题文件
var NumberOfImages=10
var img=新数组（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
函数NextImage（）
{
imgNumber++
if（imgNumber==NumberOfImages）
imgNumber=0
document.images[“VCRImage”].src=img[imgNumber]
}
函数PreviousImage（）
{
imgNumber--
如果（imgNumber<0）
imgNumber=NumberOfImages-1
document.images[“VCRImage”].src=img[imgNumber]
}

有什么想法吗？

我建议在这样的项目中使用插件，然后定制它以满足您的需要

这里有一个链接可以让您启动：

如果您想每次重新加载页面，您只需更新

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>


var NumberOfImages=10
var img=新数组（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]；
函数NextImage（）
{
location.href='this.html#img='+（imgNum+1）；
}
函数PreviousImage（）
{
location.href='this.html#img='+（imgNum-1）；
}

但现在的问题是，每次我重新加载页面时，它都会将幻灯片显示停在第一张图像上。