图片幻灯片javascript

我找不到为什么我的图片幻灯片不能在网页上工作，有人可以告诉我为什么吗？图片幻灯片javascript

我有以下

<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的一个标签，但它并没有真正影响它，有人能告诉我，我可能会丢失？先谢谢你。

来源

2014-07-04 user3766803

我认为它什么都不做'如果（步骤<2）步骤++其他步骤= 1' –

@ user3766803这里有几个问题，但不要担心...我们都在这里学习:) –

尝试这样

 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）没有这个我不改变你的任何代码..

来源

2014-07-04 11:25:17 Arunkumar

嗨！更改为slideit而不是“slideit（）”也不起作用，我认为它不会起作用，因为slideit（）是一个函数，但我仍然双重检查 – user3766803

-1

有几个问题 - Image Slideshow javascript - 以下版本是cl OSE到你已经拥有...

（需要在目录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>

来源

2014-07-04 11:35:19

Hello！这样做并不会在我的网页上显示任何图像，您为什么认为.png可以工作而不是.jpg？ – user3766803

'''.png'''和'''.jpg'''的功能同样不错，对于我来说，制作屏幕截图的时候只需要''''.png''扩展名就简单了。请在这里用'''.jpg'''进行演示：http://plnkr.co/edit/sA42q7Cm94Jbc051yJjO?p=preview –

尝试像这样

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

来源

2014-07-04 11:39:40 Unknownman

我看到你在这一行中包含了一个png图像 - user3766803

just use like this – Unknownman

我认为它有效正确 – Unknownman

你想要什么类型的幻灯片。在背景或图像幻灯片在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;}

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

来源

2017-01-12 07:14:29 Maulik

图片幻灯片javascript

回答

相关问题