如何在幻灯片中添加其他图像

时间:2015-01-19 18:09:53

标签: javascript html

我制作了幻灯片,我想知道如何添加第三张图片。这是我的代码:(顺便说一下,下面的图片3是我想在幻灯片中插入的图片。

<script type="text/javascript">
var image1 = new Image()
image1.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/9889814_orig.jpg"
var image2 = new Image()
image2.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/1421690233.png"
var image3 = new Image()
image3.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"

</script>
</head>
<body>
<img src="" name="slide" id="slide"/>
<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<2)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
</script>

2 个答案:

答案 0 :(得分:1)

您需要添加新的var并为计数器添加+1

<script type="text/javascript">
var image1 = new Image()
image1.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/9889814_orig.jpg"
var image2 = new Image()
image2.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/1421690233.png"
var image3 = new Image()
image3.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
var image4 = new Image()
image4.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"

</script>
</head>
<body>
<img src="" name="slide" id="slide"/>
<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()",2500);
        }
        slideit();
</script>

我也建议使用数组,这将使您的代码更清晰易懂

答案 1 :(得分:0)

在脚本范围内添加所有其他内容:

var image4 = new Image()
image4.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"

代码:document.images.slide.src = eval("image"+step+".src"); 将自动获取,因为它将在此HTML

中获取所有Image()个对象