个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 23:18:03 25 4
gpt4 key购买 nike

我刚刚陷入创建图像 slider 的困境。该图像 slider 将为每个事件处理不同的图像。但目前连 slider 都不起作用。

< 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>
这个效果非常好，但我似乎无法让它在同一页面上的多个组上工作(如果有办法解决问题，我宁愿使用此代码)

最佳答案

您对选择器有理解错误，请尝试以下操作:

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

关于javascript - html图像幻灯片显示多个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35648652/

25 4 0
文章推荐： C++ priority_queue 没有推送？
文章推荐： javascript - 将 `ng-repeat` 元素传递给 JavaScript 函数
文章推荐： css - 将 DropUp 菜单从悬停更改为单击
文章推荐： c++ - 针对许多离散值进行测试的首选方法？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com