несколько слайдеров на одном сайте?

Question

javascript newbee here: |

Я создал slidershow, но мне нужно добавить еще 4 slidershows на моем сайте, если я добавить больше slidershows только первые slidershow работы, другой стоит на месте:/

может кто-то объяснить мне, что мне нужно изменить, чтобы получить несколько слайдеров на моем сайте?

вот мой ява скрипт:

<script type="text/javascript"> 
     var image1=new Image() 
     image1.src="bilder/tfb_g/slide1.jpg" 
     var image2=new Image() 
     image2.src="bilder/tfb_g/slide2.jpg" 
     var image3=new Image() 
     image3.src="bilder/tfb_g/slide3.jpg" 
    </script> 
    <script type="text/javascript"> 
     var step=1 
     function slideit(){ 
     document.images.slide.src=eval('image'+step+'.src') 
     if(step<3) 
     step++ 
     else 
     step=1 
     setTimeout('slideit()',3000) 
     } 
     slideit() 
    </script> 

и вот картина в моем теле:

<img class="small" src="./bilder/tfb_g/slide.jpg" name="slide"> 

я немного беспомощным Xp

Answer 1

TRY класс:

var image1 = new Image(); 
image1.src = "bilder/tfb_g/slide1.jpg"; 

var image2 = new Image(); 
image2.src = "bilder/tfb_g/slide2.jpg"; 

var image3 = new Image(); 
image3.src = "bilder/tfb_g/slide3.jpg"; 


SlideShow = function (ele) { 
    this.step = 1; 
    this.element = ele; 

    this.Move = function() { 
     this.element.src = eval('image' + this.step + '.src'); 
     if (this.step < 3) this.step++; 
     else this.step = 1; 

     setTimeout(this.Move(), 3000); 
    }; 
}; 

и для HTML

<img class="small" src="./bilder/tfb_g/slide.jpg" onload="slideshow1 = new SlideShow(this); slideshow1.Move();"> 

но убедитесь, что для каждого элемента вы переименовываете встроенные переменные javascript. EX:

slideshow2 = new SlideShow(this); slideshow2.Move(); 
slideshow3 = new SlideShow(this); slideshow3.Move(); 
slideshow65 = new SlideShow(this); slideshow65.Move(); 

http://jsfiddle.net/Lwxbrpgj/