HTML 图像大小和循环功能答案

【问题标题】：HTML Image sizes & cycling functionsHTML 图像大小和循环功能
【发布时间】：2015-06-21 16:57:16
【问题描述】：

所以基本上，我需要做一些事情，以使图像不会扭曲并以原始尺寸显示。我尝试使用它们的实际宽度 x 高度将它们添加到代码中，但这只是显示所有图像而不是固定它们的大小。

另外，需要更改 previous() 函数，以便当它到达第一张图像时，它会显示最后一张图像 - 所以它会循环播放。

<html>
<head>
<script type="text/javascript">
myImages=new Array();
myImages[0]="w3schools.gif";
myImages[1]="bulbon.gif";
myImages[2]="landscape.jpg";
myImages[3]="w3schools.gif";
myImages[4]="bulboff.gif";
myImages[5]="smiley.gif";
imagecounter=myImages.length-1;
i=0;

function first()
{
document.getElementById('imageviewer').src=myImages[0];
i=0;
}

function previous()
{
if (i>0)
    {
    i--;
    document.getElementById('imageviewer').src=myImages[i];
    }
}

function next()
{
if (i<imagecounter)
    {
    i++;
    document.getElementById('imageviewer').src=myImages[i];
    }
}

function last()
{
document.getElementById('imageviewer').src=myImages[imagecounter];
i=imagecounter;
}

</script>
</head>

<body>
<center>
<img id="imageviewer" src="w3schools.gif" alt="w3Scools" width="100" height="30" />
<img id="imageviewer" src="bulbon.gif" alt="bulbon" width="100" height="180" />
<img id="imageviewer" src="landscape.jpg" alt="landscape" width="160" height="120" />
<img id="imageviewer" src="w3schools.gif" alt="w3Scools" width="100" height="30" />
<img id="imageviewer" src="bulboff.gif" alt="bulboff" width="100" height="180" />
<img id="imageviewer" src="smiley.gif" alt="smiley" width="32" height="32" />
<form>
<input type="button" value="First" onclick="first()">
<input type="button" value="Previous" onclick="previous()">
<input type="button" value="Next" onclick="next()">
<input type="button" value="Last" onclick="last()">
</form>
</center>
</body>
</html>

【问题讨论】：

标签： javascript html image function dhtml

【解决方案1】：

对于您问题的第 1 部分：

每张图片都是同时显示的，因为您同时显示它们。您需要拥有一个元素并放入特定图像的元素数据。

第 1 部分的完整代码

<html>
<head>
<script type="text/javascript">
myImages=new Array();
myImages[0]= {src:"http://cdn.impressivewebs.com/2014-02/w3schools-logo.jpg", width:"100", height:"30"}
myImages[1]= {src:"http://www.w3schools.com/js/pic_bulbon.gif", width:"100", height:"180"}
myImages[2]= {src:"http://www.ephotozine.com/epz.gif", width:"160", height:"120"}
myImages[3]= {src:"http://cdn.impressivewebs.com/2014-02/w3schools-logo.jpg", width:"100", height:"30"}
myImages[4]= {src:"http://www.w3schools.com/js/pic_bulbon.gif", width:"100", height:"180"}
myImages[5]= {src:"http://www.ephotozine.com/epz.gif", width:"32", height:"32"}

i=0;

first();

function first()
{
    console.log('first');
    document.getElementById('imageviewer').src = myImages[0]["src"];
    document.getElementById('imageviewer').style.height = myImages[0]["height"];
    document.getElementById('imageviewer').style.width = myImages[0]["width"];

    i=0;
}

function previous()
{
    if (i>0) {
        i--;
    }
    else {
        i = myImages.length - 1
    }
    document.getElementById('imageviewer').src = myImages[i]["src"];
    document.getElementById('imageviewer').style.height = myImages[i]["height"];
    document.getElementById('imageviewer').style.width = myImages[i]["width"]; 
}

function next()
{
    if (i<myImages.length) {
        i++;
        document.getElementById('imageviewer').src = myImages[i]["src"];
        document.getElementById('imageviewer').style.height = myImages[i]["height"];
        document.getElementById('imageviewer').style.width = myImages[i]["width"]; 
    }
}

function last()
{
    document.getElementById('imageviewer').src = myImages[myImages.length - 1]["src"];
    document.getElementById('imageviewer').style.height = myImages[myImages.length - 1]["height"];
    document.getElementById('imageviewer').style.width = myImages[myImages.length - 1]["width"];              
    i=myImages.length - 1;
}
</script>
</head>
<body>

<center>
<img id="imageviewer" src="smiley.gif" alt="smiley" width="32" height="32" />
<form>
<input type="button" value="First" onclick="first()">
<input type="button" value="Previous" onclick="previous();">
<input type="button" value="Next" onclick="next();">
<input type="button" value="Last" onclick="last();">
</form>
</center>

对于您问题的第 2 部分：

在 if 语句中添加一个 else，将 i 设置为等于数组长度减 1。

function previous() {
    if (i>0) {
        i--;
    }
    else {
        i = myImages.length - 1; //-1 because arrays are 0-indexed
    }
    document.getElementById('imageviewer').src=myImages[i];
}

工作示例 -> https://jsfiddle.net/9qhneheL/

【讨论】：

另外，当我按照您在第 2 部分中所说的操作时，以前的功能现在不起作用
已添加完整代码。既然你是新人，我不会成为一个混蛋，但你似乎真的不了解 Stackoverflow 的工作原理。这个网站不是真正的“给我答案”类型的东西。它更多地用于解决您遇到的特定问题的指针。我希望你坚持并拥抱 SO 社区。span>
另外，如果我想对 next() 函数和 previous() 函数做同样的事情，我会怎么做？只是改变“i = myImages.length - 1”的值？
你会做else { i = 0 }