一个网站上有多个幻灯片?

时间:2015-06-22 11:24:14

标签: javascript html

javascript newbee here:|

我创建了一个幻灯片,但我需要在我的网站上添加4个幻灯片,如果我添加更多幻灯片只有第一个幻灯片工作,另一个静止:/

有人可以解释我,我需要改变什么,在我的网站上获得多个幻灯片吗?

这是我的java脚本:

    <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

1 个答案:

答案 0 :(得分:0)

尝试上课:

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/