多个图像的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图像幻灯片

回答

相关问题