多個圖像的html圖像幻燈片

我剛剛創建了一個圖像滑塊。這個圖像滑塊Shell將爲每個事件處理不同的圖像。但在這個瞬間，即使滑塊不能用於一個。多個圖像的html圖像幻燈片

< script type = "text/javascript" > 
 
    var image1 = new Image() 
 
image1.src = "/images/AchernerBogenclubTitel.jpg" 
 
var image2 = new Image() 
 
image2.src = "images/P1220966.JPG" < /script>

<div class="boxInner" class="bw pic"> 
 
    <img src="/images/turnierbilder/2015/LMH2015_SGVillingen_markus_norbert.jpg" name="slide" /> 
 
    <script type="text/javascript"> 
 
    var step = 1; 
 

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

我的代碼都是在同一個文件。

我也嘗試使用不同的apoache：

<td> 
 
    <center> 
 
    <p style="font-size:12px "> 
 
     <a href="/docs/landesmeisterschafthallesbsv2015.pdf"> 
 
     <script type="text/javascript"> 
 
      <!--> 
 
      var image1 = new Image() 
 
      image1.src = "LMH2015_SGVillingen_P1220967.jpg" 
 
      var image2 = new Image() 
 
      image2.src = "LMH2015_SGVillingen_P1220971.jpg" 
 
      var image3 = new Image() 
 
      image3.src = "LMH2015_SGVillingen_P1220973.jpg" 
 
      var image4 = new Image() 
 
      image4.src = "LMH2015_SGVillingen_P1220977.jpg" 
 
      var image5 = new Image() 
 
      image5.src = "LMH2015_SGVillingen_P1220985.jpg" 
 
      //--> 
 
     </script> 
 
     </head> 
 

 
     <body> 
 
      <img name="slide" width="310" height="222"> 
 
      <script type="text/javascript"> 
 
      <!-- 
 
      var step = 1 
 

 
      function slideit() { 
 
       document.images.slide.src = eval("image" + step + ".src") 
 
       if (step < 5) 
 
       step++ 
 
       else 
 
        step = 1 
 
       setTimeout("slideit()", 5000) 
 
      } 
 
      slideit() 
 
       //--> 
 
      </script>

這一件作品真的很好，但我似乎無法得到它在同一頁面上多組工作（ID而使用此代碼是否有解決這個問題）

來源

2016-02-26 Mark

「document.images.slide」那歐試試？ –

您都設有關於選擇理解錯誤的方式，試試這個：

<div class="boxInner" class="bw pic"> 
     <img src="" id="slide" /> 
    </div> 

<script type = "text/javascript" > 
    var image1 = new Image(); 
image1.src = "http://www.louisetzeliemartin.org/medias/images/chat-1.jpg"; 
var image2 = new Image(); 
image2.src = "https://static.mediapart.fr/files/2016/01/30/chat.jpg"; 
    var step = 1; 

    function slideit() { 
     document.getElementById('slide').src = eval("image" + step + ".src"); 
     if (step < 2) 
     step++; 
     else 
     step = 1; 
     setTimeout("slideit()", 2500); 
    } 
    slideit(); 
</script>

版本與陣列：

<script type = "text/javascript" > 


    var image1 = new Image(); 
    image1.src = "http://www.louisetzeliemartin.org/medias/images/chat-1.jpg"; 


var image2 = new Image(); 
image2.src = "https://static.mediapart.fr/files/2016/01/30/chat.jpg"; 

var images = [image1,image2];//here i create an array "images" with two elements "image1" and "image2" 

    var step = 0;//step is now 0 because 1st index of an array is 0 

    function slideit() { 
     document.getElementById('slide').src = images[step].src;//i want read index n of my array 
     if (step < (images.length-1))//lenght give number of element in this array 
     step++; 
     else 
     step = 0; 
     setTimeout("slideit()", 2500); 
    } 
    slideit(); 
</script>

版本2張圖片：

<div class="boxInner" class="bw pic"> 
     <img src="" id="slide1" /> 
     <img src="" id="slide2" /> 
    </div> 

<script type = "text/javascript" > 
var image1 = new Image(); 
image1.src = "http://www.louisetzeliemartin.org/medias/images/chat-1.jpg"; 


var image2 = new Image(); 
image2.src = "https://static.mediapart.fr/files/2016/01/30/chat.jpg"; 

var image3 = new Image(); 
image3.src = "http://media.virginradio.fr/article-2505914-fb-f1415609183/chat-mignon-petit-chaton-therapie-detente.jpg"; 


var image4 = new Image(); 
image4.src = "http://media.meltydiscovery.fr/article-2927858-fb/chat-chaton-chats-biso-le-caire-egypte-metro.jpg"; 


var images = [image1,image2,image3,image4]; 

    var step = 0;//step is now 0 because 1st index of an array is 0 

    function slideit() { 
     document.getElementById('slide1').src = images[step].src; 
     document.getElementById('slide2').src = images[step+1].src; 
     if (step < (images.length-1)/2) 
     step=step+2; 
     else 
     step = 0; 
     setTimeout("slideit()", 2000); 
    } 
    slideit(); 
</script>

來源

2016-02-26 11:02:44

此外，爲什麼你不將圖像存儲在數組中？ eval（「image」+ step +「.src」）;不是一個好的做法 –

什麼是數組？而你用它做什麼？ – Mark

如何將它用於不同的照片組幻燈片？ – Mark

多個圖像的html圖像幻燈片

回答

相關問題