HTML 图片大小和循环函数

Question

所以基本上，我需要做一些事情以使图像不失真并以原始大小显示。我试着用它们的实际宽度 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>

Answer 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 部分：

将 else 添加到您的 if 语句中，将 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/

HTML 图片大小和循环函数

HTML Image sizes & cycling functions

html

javascript

dhtml

image

function