图片幻灯片javascript

Question

我找不到为什么我的图片幻灯片无法在网页上播放的原因，有人可以告诉我为什么吗？

我有下面的代码

<head>
 <script type ="text/javaScript">

      var image1=new Image()
      image1.src="download.jpg"
      var image2=new Image()
      image2.src="beauty.jpg"

</script> 
</head> 

<body>
<img src="download.jpg" name="firstImage" height = 100 width=300></img>
</body>

<script type="text/javascript">
        //variable that would increment through the images
      var step = 1  
      function slideit() {
        //if browser does not support the image object exit
        if(!document.images)
          return document.images.firstImage.src=eval("image"+step+".src")

        if(step<2) 
          step++
        else 
          step=1

        //call function "slideit()" every 2.5 seconds
        setTimeout("slideit()",2500)
      }
      slideit()
       </script>
  </html>

我尝试将整个javascript放在一个标签中，但实际上并没有影响它，有人可以告诉我我可能会缺少什么吗？ 先感谢您。

Answer 1

这样尝试

      function slideit() {
       if(document.images)
       document.images.firstImage.src=eval("image"+step+".src");
       if(step<2) 
       step++
       else 
       step=1
       setTimeout(slideit,2500)
                         }

我把你的代码放在这里了

小提琴

问题是if（！document.images）总是给出false，所以我只是把它设为if（document.images）而没有这个，我不会更改您的任何代码。

Answer 2

像这样尝试

        <!DOCTYPE html PUBLIC >
    <html>
    <head>
    <head>
    <script type ="text/javaScript">

     var image1=new Image()
  image1.src="download.jpg"
  var image2=new Image()
  image2.src="beauty.jpg"

    </script> 
    </head> 

    <body>
    <img src="globe/images/correct.png" name="firstImage" height = 100 width=300></img>
    </body>

    <script type="text/javascript">
    //variable that would increment through the images
    var step = 1  
    function slideit() {


    if(step<2) 
    step++
    else 
    step=1

    document.images.firstImage.src=window["image"+step].src;



    //call function "slideit()" every 2.5 seconds
    setTimeout(slideit,2500)
    }
    slideit()
    </script>
    </html>

Answer 3

您想要哪种幻灯片。 是在div的背景播放还是在图片幻灯片播放？ 我在这里提到了使用jquery播放各种图像的幻灯片。 尝试一下，希望对您有用。

HTML代码：

<div id="slide">
<img class="img-responsive disp" src="img/1.jpg"/>
<img class="img-responsive disp" src="img/4.jpg"/>
<img class="img-responsive disp" src="img/2.jpg"/>
<img class="img-responsive disp" src="img/3.jpg"/>
<img class="img-responsive disp" src="img/5.jpg"/> 
<img class="img-responsive disp" src="img/14.jpg"/>
</div> 

jQuery的：

$('document').ready(function() {
    var $imgs = $('#slide > img'), 
    current = 0;

    var nextImage = function() {
    if (current >= $imgs.length) current = 0;
    $imgs.eq(current++).fadeIn(function() {
    $(this).delay(800).fadeToggle(nextImage);
    })};
    nextImage();

    });

CSS：

.disp{display:none;}

这适用于网页上的图像幻灯片显示。

Answer 4

有几个问题- 图片幻灯片javascript-以下版本与您已经拥有的版本接近...

（需要目录中的0.png和1.png）

<html>
  <head>

  </head> 

  <body>
    <img src="1.png" name="firstImage" height=100 width=300>
  </body>

  <script type="text/javascript">
    var step = 1;

    function slideit() {

      var imagenumber = step++ % 2;
      var imagesrc = imagenumber + ".png";
      document.images.firstImage.src = imagesrc;

      setTimeout(slideit,2500)
    }

    slideit()
  </script>

</html>