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)
                         }

我已将您的代码放在此处

Fiddle

问题是如果（！document.images）总是给出假，所以我只是如果（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 code：

<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

有几个问题 - Image Slideshow javascript - 以下版本与您已有的版本接近......

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

enter image description here

<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>

图片幻灯片javascript

4 个答案: