#javascript #image
#javascript #изображение
Вопрос:
Здравствуйте, я хотел бы попросить вашей помощи относительно кода javascript, как мне выполнить эту работу?
Я сохранил изображения на своем общем диске. Нужно ли мне изменить какой-то путь здесь:
Спасибо
<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>
Ответ №1:
Я сохранил изображения на своем общем диске. Нужно ли мне изменить какой-то путь здесь
Зачем указывать статический / абсолютный путь? Используйте относительный путь в своем веб-приложении. И если вы просто практикуетесь с одним HTML, тогда просто поместите все изображения в ту же папку, в которой находится HTML.
Относительный путь
Это означает путь к файлу, в котором расположено изображение, «относительно» HTML-страницы. Другими словами, вы определяете путь к изображению, используя HTML-страницу в качестве отправной точки. Например:-
<img src="../images/img.jpg" />
Абсолютный путь
Абсолютные пути отличаются от относительных путей тем, что не имеет значения, где файлы изображений расположены относительно ваших веб-страниц. Это происходит потому, что вы точно указываете браузеру, где находится файл в Интернете.Пример:-
<img src=" D/Web/pic001.png" />
Смотрите это для получения дополнительной справки.
В вашем коде ниже приведен код, в котором вы используете путь к изображению:
var image1=new Image()
image1.src="pic001.png"
var image2=new Image()
image2.src="pic002.png"
var image3=new Image()
image3.src="pic003.png"
Обновить:-
Поскольку ваш 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>
Мой демонстрационный рабочий код:
<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>
Выше приведен мой демонстрационный код, который работает нормально. Я внес некоторые изменения в ваш код, теперь он будет менять изображение с интервалом. Я надеюсь, это то, что вы хотите. Вам нужно изменить путь к изображению, который вы использовали в своем коде, в остальном все в порядке и готово к работе.
Комментарии:
1. @Гарри Джой: Хорошо. Извините, я не совсем понимаю, что такое статический путь и относительный путь? Было бы полезно, если бы вы могли сказать мне, где это находится в коде. Спасибо
2. @Гарри Джой: Я бы хотел попрактиковаться в JS. Кстати, у меня есть все изображения в одной папке.
3. @tintincute: Я попытался объяснить относительный и абсолютный путь в своем ответе, взгляните.
4. @Harry Joy: Спасибо, я пробовал, но это не сработало. Я отредактировал свой вопрос выше. Правильно ли это сейчас?
5. @tintincute: где ваш HTML-файл? в какой папке? можете ли вы показать нам структуру папок, которая содержит как html-файл, так и изображение?
Ответ №2:
Не рекомендуется добавлять абсолютные пути в ваш JavaScript. Лучше размещать их в папках, содержащих вашу корневую страницу. С этого момента используйте относительные пути.
Комментарии:
1. @Gunner: Спасибо за ответ. Должно ли это быть так: D / Web / pic001.png?
2. Нет необходимости в D, просто используйте «images / pic001.png», предполагая, что все файлы находятся внутри папки images, а images расположены внутри корневого каталога, в котором находится ваша главная страница.
3. @Gunner: Но все они находятся на моем локальном диске. Я также сохранил HTML-код на своем рабочем столе
4. @tintincute: Почему бы вам не поместить их в ту же папку.
5. @Gunner: Что вы имеете в виду, в той же папке? Да, все они находятся в одной папке?