Как я могу использовать два слайд-шоу javascript на одной странице? html

Привет, я делаю HTML последние 3 месяца в колледже и должен разработать веб-сайт. Я почти готов, но я пытаюсь поставить 4 слайд-шоу на одну страницу. Я могу получить один рабочий, но следующий, который я создаю, кажется, перезаписывает первый. Может кто-нибудь, пожалуйста, посмотрите на мой код и дайте мне представление, что я должен делать .. вот мой код для обоих слайд-шоу, кроме ссылок и изображений, Diferent.Как я могу использовать два слайд-шоу javascript на одной странице? html

var i = 0; 
 
\t \t var image = new Array(); 
 
\t \t // LIST OF IMAGES 
 
\t \t image[0] = "strawberrypancakes.jpg" 
 
\t \t image[1] = "chickenbroth.jpg"; 
 
\t \t image[2] = "noodlesalad.jpg"; 
 
\t \t var k = image.length-1;  
 

 
\t \t var caption = new Array(); 
 
\t \t // LIST OF CAPTIONS 
 
\t \t caption[0] = "Strawberry buckwheat pancakes"; 
 
\t \t caption[1] = "Hot chicken broth"; 
 
\t \t caption[2] = "Pepper and noodle salad"; 
 

 
\t \t var link= new Array(); 
 
\t \t // LIST OF LINKS 
 
\t \t link[0] = "http://www.jamieoliver.com/recipes/breakfast/"; 
 
\t \t link[1] = "http://www.jamieoliver.com/recipes/chicken/"; 
 
\t \t link[2] = "http://www.jamieoliver.com/recipes/vegetables/"; 
 
\t \t \t \t \t  
 

 
\t \t function swapImage(){ 
 
\t \t var el = document.getElementById("mydiv"); 
 
\t \t el.innerHTML=caption[i]; 
 
\t \t var img = document.getElementById("slide"); 
 
\t \t img.src= image[i]; 
 
\t \t var a = document.getElementById("link"); 
 
\t \t a.href= link[i]; 
 

 
\t \t if(i < k) { i++;} 
 
\t \t else { i = 0; } 
 
       setTimeout("swapImage()",5000); 
 
\t \t \t \t \t } 
 
\t \t function addLoadEvent(func) { 
 
\t \t var oldonload = window.onload; 
 
\t \t if (typeof window.onload != 'function') { 
 
\t \t window.onload = func; 
 
\t \t } else { 
 
\t \t window.onload = function() { 
 
\t \t if (oldonload) { 
 
\t \t oldonload(); 
 
\t \t } 
 
\t \t func(); 
 
\t \t } 
 
\t \t } 
 
\t \t } 
 
\t \t addLoadEvent(function() { 
 
\t \t swapImage(); 
 
\t \t });

\t \t <table style="border:none;background-color:transparent;"> 
 
\t \t <tr> 
 
\t   <td> 
 
     <a name="link" id="link" href="http://www.siteforinfotech.com/"  target="_blank"><img name="slide" id="slide" alt 
 

 
\t ="my images" height="250" width="590" src="image-1.png"/></a> 
 
\t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t <td align="center"style="font:small-caps bold 15px georgia; color:blue;"> 
 
\t \t <div id ="mydiv"></div> 
 
\t \t </td> 
 
\t \t </tr> 
 
\t \t </table>

источник

2017-01-14 Anonymous

Возможно, Вы используете один и тот же идентификатор для обоего. Попробуйте использовать разные идентификаторы или ссылки как по классу – FabioCosta

Похоже, что вызов 'window.onload' называется проблемой; также вам может потребоваться использовать 'setInterval' не' setTimeout'. Было бы здорово, если бы вы могли подробно остановиться на том, что вы подразумеваете под * Я пытаюсь поставить 4 слайд-шоу на одну страницу * –

проще всего, с верхней части моей головы, это просто дублировать структуру HTML для слайд-шоу, изменение ID и NAME атрибуты LINK2, slide2 и mydiv2, то просто дублировать функция подкачки, назовите его swapImage2(), а затем добавить его следующим образом:

addLoadEvent(function() { 
    swapImage(); // for the first slideshow 
    swapImage2(); // for second slideshow 
});

уборщик решение будет иметь одну функцию swapimage и передать в него цель DOM элемент/слайд-шоу вы хотите дегтя получить.

Heres быстрая скрипка из быстрого способа я мог придумать Fiddle Example

источник

2017-01-14 21:27:15 tamak

Как я могу использовать два слайд-шоу javascript на одной странице? html

ответ

Смежные вопросы