Javascript 图像幻灯片_Javascript_Image_Slideshow

Javascript 图像幻灯片

javascript image

Javascript 图像幻灯片,javascript,image,slideshow,Javascript,Image,Slideshow,我不知道为什么我的图片幻灯片在网页上不起作用，有人能告诉我为什么吗我有下面的代码 <head> <script type ="text/javaScript"> var image1=new Image() image1.src="download.jpg" var image2=new Image() image2.src="beauty.jpg" </script> </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="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放在一个标记中，但它并没有真正影响它，有人能告诉我可能缺少什么吗？提前谢谢。

像这样试试

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

我已经把你的代码放在这里了

问题是如果！document.images始终为false，因此我仅将其设为ifdocument.images，如果没有此选项，我不会更改您的任何代码。

存在两个问题--下面的版本与您已有的版本接近

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

像这样试试

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

你想要哪种幻灯片。在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>

CSS:

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

我认为它没有任何作用ifstep@user3766803这里有几个问题，但不要担心。。。我们都在这里学习：嗨！改为slideit而不是slideit也不起作用，因为slideit是一个函数，我没想到它会起作用，但我还是仔细检查了一下，我看到你在这行中包含了一个png图像-就像这样使用，没有img src导致打开网页时没有图像，我无法让幻灯片播放正常您好！这样做不会在我的网页上显示任何图像，为什么你认为.png可以代替.jpg？.png和.jpg同样有效，只是我更容易制作默认扩展名为.png的截图。请在此处使用.jpg进行演示：

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

$('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();

    });

.disp{display:none;}