html图像幻灯片显示多个图像

html图像幻灯片显示多个图像

关注
发信
关注(28)粉丝(399)

html图像幻灯片显示多个图像

本文介绍了html图像幻灯片显示多个图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚创建了一个Image滑块。这个图像滑块Shell将为每个事件处理不同的图像。但在瞬间，即使滑块不能用于一个。



< script type =text / javascript> var image1 = new Image（）image1.src =/images/AchernerBogenclubTitel.jpgvar image2 = new Image（）image2.src =images / P1220966.JPG< / script> 
 < div class =boxInnerclass =bw pic> < img src =/ images / turnierbilder / 2015 / LMH2015_SGVillingen_markus_norbert.jpgname =slide/> < script type =text / javascript> var step = 1;函数slideit（）{document.images.slide.src = eval（image+ step +.src）;如果（步骤< 2）步骤++;否则step = 1; setTimeout（slideit（），2500）; } slideit（）; < / script>


我的两个代码都在同一个文件中。



我也尝试使用不同的apoache：

< td> <中心]，[ < p style =font-size：12px> < a href =/ docs / landesmeisterschafthallesbsv2015.pdf> < script type =text / javascript> <！ - > var image1 = new Image（）image1.src =LMH2015_SGVillingen_P1220967.jpgvar image2 = new Image（）image2.src =LMH2015_SGVillingen_P1220971.jpgvar image3 = new Image（）image3.src =LMH2015_SGVillingen_P1220973.jpgvar image4 = new Image（）image4.src =LMH2015_SGVillingen_P1220977.jpgvar image5 = new Image（）image5.src =LMH2015_SGVillingen_P1220985.jpg// - > < /脚本> < /头> <身体GT; < img name =slidewidth =310height =222> < script type =text / javascript>如果（步骤5）步骤++其他步骤= 1 setTimeout（步骤5）， slideit（），5000）} slideit（）// - > < / script>


这个工作很好，但我似乎无法让它工作在多个在同一页面上的组（如果有解决问题的方法，请使用此代码）

理解选择器，试试这个：

 < div class =boxInnerclass =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; 
 
函数slideit（）{
 document.getElementById（'slide'）。src = eval（image+ step +.src）; 
 if（步骤< 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]; //这里我用两个元素image1和image2创建一个数组image
 $ b var step = 0; // step is now 0 because one first index of a array is 0 
 
 function slideit（）{
 document.getElementById（'slide'）。src = images [step] .src; / / /我想要读取我的数组
的索引n if（step  step ++; 
 else 
 step = 0; 
 setTimeout（slideit（），2500）; 
} 
 slideit（）; 
< / script>

带2张图片的版本：

 < div class =boxInnerclass =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-c​​haton-chats-biso-le-caire-egypte-metro.jpg; 
 
 
 var images = [image1，image2，image3，image4]; 
 
 var step = 0; // step现在是0，因为数组的第一个索引是0 
 
函数slideit（）{
 document.getElementById（'slide1 '）.src = images [step] .src; 
 document.getElementById（'slide2'）。src = images [step + 1] .src; 
 if（step  step = step + 2; 
 else 
 step = 0; 
 setTimeout（slideit（），2000）; 
} 
 slideit（）; 
< / script>


I've just got stuck with creating a Image slider. This image slider Shell be handling different Images for each Event. But at the Moment even the slider is not working for one.

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

both of my codes are in the same file.

I also tried to use a different 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>

This one works realy nicely but i seem to not be able to get it to work on multiple Groups on the same page (id rather use this Code if there is a way to fix the issue)

解决方案

You have en error of comprehension about selector, try this :

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

Version with array :

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

Version with 2 images : 

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

这篇关于html图像幻灯片显示多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-23 04:21
Powered by LMLPHP ©2024 html图像幻灯片显示多个图像 0.053067