Я могу успешно сделать слайд-шоу в html, но я пытаюсь сделать два и не работать, вот мой код:
<script type="text/javascript">
var image1 = new Image()
image1.src = "img/home/residential.gif"
var image2 = new Image()
image2.src = "img/home/1.gif"
var image3 = new Image()
image3.src = "img/home/2.gif"
</script>
<table align="center" width="70%"cellpadding=5 cellspacing=5>
<tr>
<td rowspan=2 align=center><a href="artistic.html"><figure><img src="logo1.gif" alt="Atristic Impressions" width="400" height="600" name="slide"/><figcaption style="color: #610B21">Artistic Impressions</figure></td>
<script type="text/javascript">
var step=1;
function slide()
{
document.images.slide.src = eval("image"+step+".src");
if(step<3)
step++;
else
step=1;
setTimeout("slide()",5000);
}
slide();
</script>
<script type="text/javascript">
var image1 = new Image()
image1.src = "img/barns/1.gif"
var image2 = new Image()
image2.src = "img/barns/2.gif"
var image3 = new Image()
image3.src = "img/barns/3.gif"
var image4 = new Image()
image4.src = "img/barns/4.gif"
</script>
<td align=center><a href="Barns.html"><figure><img src="img/barns/1.gif" alt="Barn Conversions" width="400" height="300" name="slide"/ ><figcaption style="color: #610B21">Barn Conversions</figure></td>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image1"+step+".src");
if(step<3)
step++;
else
step=1;
setTimeout("slideit()",5000);
}
slideit();
</script>
У обоих <img>
есть имя "слайд". Вы должны дать им разные имена, чтобы браузер знал, с кем работать. Что-то вроде "slide1" и "slide2" должно выполнять эту работу.
Что происходит, вы используете код, который противоречит самому себе. Вы определили изображения на глобальном уровне, а затем переопределили их позже при настройке второго шоу. Вы также продублировали переменную шага, хотя это может не иметь значения, если вы используете одно и то же значение. Вы также влияете на одно и то же изображение, используя оба сценария слайдера, поэтому цель на одном должна измениться. Более аккуратным способом является использование одной функции, добавляющей некоторые параметры, чтобы вы могли иметь дело с обоими наборами изображений и элементами DOM.
что-то вроде:-
function slide( image_id, image_array) {
myImage = getElementById(image_id);
myImage.src = image_array[step];
}
Конечно, там гораздо больше, чем в этом, и есть много примеров более качественных слайдеров изображений, которые могли бы запускать два отдельных экземпляра. Я бы предложил изучить некоторые из них.