圖片幻燈片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

回答

相關問題