javascript更改图像_Javascript_Image

javascript更改图像

javascript image

javascript更改图像,javascript,image,Javascript,Image,您好，我想问您关于javascript代码的帮助，我如何进行这项工作我已将图像保存在我的D驱动器中。我是否需要在此处更改某些路径：谢谢 <html> <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="pic001.png" var image2=new Image() image2.src="pic002.png" var image3=ne

您好，我想问您关于javascript代码的帮助，我如何进行这项工作

我已将图像保存在我的D驱动器中。我是否需要在此处更改某些路径：

谢谢

<html>
<head>
<script type="text/javascript">

<!--
var image1=new Image()
image1.src="pic001.png"
var image2=new Image()
image2.src="pic002.png"
var image3=new Image()
image3.src="pic003.png"
//-->
</script>
</head>

<body onLoad="slidit()">
<img src="pic001.png" name="slide" width="400" height="120" />


<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("images"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 1 seconds
setTimeout("slideit()",1000)
}
slideit()
//-->
</script>

</body>


</html>

我已将图像保存在我的D驱动器中。我需要在这里改变一些路径吗

为什么要给出静态/绝对路径？在webapp中使用相对路径。如果你只是在练习单个HTML，那么就把所有的图片放在HTML所在的同一个文件夹中

相对路径它指的是图像相对于HTML页面的“相对”位置的文件路径。换句话说，以HTML页面为起点确定图像的路径。例如：-

<img src="../images/img.jpg" />

更新：-

因为您的html和图像位于同一文件夹中，所以您应该这样编写：

<script type="text/javascript">

<!--
var image1=new Image()
image1.src="pic001.png"
var image2=new Image()
image2.src="pic002.png"
var image3=new Image()
image3.src="pic003.png"
//-->
</script>

我的演示工作代码：


var image1=“./images/img02.jpg”
var image2=“./images/img03.jpg”
var image3=“./images/img04.jpg”
//变量，该变量将在图像中递增
var阶跃=1
函数slideit（）{
//如果浏览器不支持图像对象，请退出。
开关（步骤）{
案例1：
document.images.slide.src=image1；
打破
案例2：
document.images.slide.src=image2；
打破
案例3：
document.images.slide.src=image3；
打破
}
如果（步骤<3）{
台阶++
}
否则{
步骤=1
}
//每1秒调用函数“slideit（）”
setTimeout（“slideit（）”，1000）
}
slideit（）

上面是我的演示代码，运行良好。我已经在你的代码中做了一些更改，现在它将在时间间隔内更改图像。我希望这就是你想要的。在代码中使用图像路径时，您必须更改图像路径。其他事情都已准备就绪

我已将图像保存在我的D驱动器中。我需要在这里改变一些路径吗

为什么要给出静态/绝对路径？在webapp中使用相对路径。如果你只是在练习单个HTML，那么就把所有的图片放在HTML所在的同一个文件夹中

相对路径它指的是图像相对于HTML页面的“相对”位置的文件路径。换句话说，以HTML页面为起点确定图像的路径。例如：-

<img src="../images/img.jpg" />

更新：-

因为您的html和图像位于同一文件夹中，所以您应该这样编写：

<script type="text/javascript">

<!--
var image1=new Image()
image1.src="pic001.png"
var image2=new Image()
image2.src="pic002.png"
var image3=new Image()
image3.src="pic003.png"
//-->
</script>

我的演示工作代码：


var image1=“./images/img02.jpg”
var image2=“./images/img03.jpg”
var image3=“./images/img04.jpg”
//变量，该变量将在图像中递增
var阶跃=1
函数slideit（）{
//如果浏览器不支持图像对象，请退出。
开关（步骤）{
案例1：
document.images.slide.src=image1；
打破
案例2：
document.images.slide.src=image2；
打破
案例3：
document.images.slide.src=image3；
打破
}
如果（步骤<3）{
台阶++
}
否则{
步骤=1
}
//每1秒调用函数“slideit（）”
setTimeout（“slideit（）”，1000）
}
slideit（）

上面是我的演示代码，运行良好。我已经在你的代码中做了一些更改，现在它将在时间间隔内更改图像。我希望这就是你想要的。在代码中使用图像路径时，您必须更改图像路径，其他事情都可以进行。

在JavaScript中添加绝对路径不是一个好做法。最好在包含根页面的文件夹中找到它们。从那时起，使用相对路径。

在JavaScript中添加绝对路径不是一个好做法。最好在包含根页面的文件夹中找到它们。从那里开始，使用相对路径。

@Harry Joy:好的。对不起，我不太明白什么是静态路径和相对路径？如果你能告诉我它在代码中的位置，我会很有帮助的。Thanks@Harry乔伊：我想练习JS。顺便说一句，我把所有的照片都放在同一个文件夹里。@tintincute:我试图在我的回答中解释相对路径和绝对路径，看一看。@Harry Joy:谢谢，我试过了，但没用。我编辑了上面的问题。现在正确吗？@tintincute:你的html文件在哪里？在哪个文件夹中？你能给我们展示一下包含html文件和图像的文件夹结构吗？@Harry Joy:好的。对不起，我不太明白什么是静态路径和相对路径？如果你能告诉我它在代码中的位置，我会很有帮助的。Thanks@Harry乔伊：我想练习JS。顺便说一句，我把所有的照片都放在同一个文件夹里。@tintincute:我试图在我的回答中解释相对路径和绝对路径，看一看。@Harry Joy:谢谢，我试过了，但没用。我编辑了上面的问题。现在正确吗？@tintincute:你的html文件在哪里？在哪个文件夹中？你能给我们展示一下文件夹结构吗

<html>
    <head>
        <script type="text/javascript">
            var image1 = "./images/img02.jpg"
            var image2 = "./images/img03.jpg"
            var image3 = "./images/img04.jpg"
        </script>
    </head>
    <body onLoad="slidit()">
        <form name="images">
            <img src="./images/img01.jpg" name="slide" width="200" height="200" />
            <script>
                //variable that will increment through the images
                var step = 1
                function slideit(){
                    //if browser does not support the image object, exit.
                    switch(step){
                        case 1:
                            document.images.slide.src = image1;
                            break;
                        case 2:
                            document.images.slide.src = image2;
                            break;
                        case 3:
                            document.images.slide.src = image3;
                            break;
                    }
                    if (step < 3) {
                        step++
                    }
                    else {
                        step = 1
                    }
                    //call function "slideit()" every 1 seconds
                    setTimeout("slideit()", 1000)
                }

                slideit()
            </script>
        </form>
    </body>
</html>