Question

我想在10个不同图像（垂直排列）的左侧面板显示中使用wordpress，每10秒自动更改一次。我已经找到了许多改变一个图像的解决方案，但是我不知道如何使用10个图像，所以每次更改后都不会重复。有人可以帮忙吗？编辑：抱歉我之前没有发布我的代码。这是我设法做的：

<script type = "text/javascript">
      function displayImage(image, link) {
          document.getElementById("img1").src = image;
          document.getElementById("bannerLink1").href = link; 
           document.getElementById("img2").src = image;
          document.getElementById("bannerLink2").href = link;
           document.getElementById("img3").src = image;
          document.getElementById("bannerLink3").href = link;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;
          displayImage(images[x], links[x]);           
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          displayImage(images[x], links[x]);           
      }

      function startTimer() {
          setInterval(displayNextImage, 1000);
      }

      var images = [], x = -1;
      images[0] = "image1.jpg";
      images[1] = "image2.jpg";
      images[2] = "image3.jpg";

      var links = [], x = -1;
      links[0] = "http://test1.pl";
      links[1] = "http://test2.pl";
      links[2] = "http://test3.pl";
  </script>
    <img src="image1.jpg" onload = "startTimer()" style="display: none">
    <a id="bannerLink1" href="http://test1.pl">
   <img id="img1" src="image1.jpg"></a><br>
   <a id="bannerLink2" href="http://test1.pl">
   <img id="img2" src="image2.jpg"></a><br>
   <a id="bannerLink3" href="http://test1.pl">
   <img id="img3" src="image3.jpg"></a>

你可以在http://shimon893.tk/test.html上看到结果（但是idead是把它放在wordpress小部件中）开头有隐藏的img，因为我需要将它作为一个小部件插入到wordpress中，所以我需要在某处放置onload）我不知道该怎么做： 1）使图像加载随机，当页面加载时，但所有唯一（将有10个） - 没有重复 2）几秒钟后，所有图像都应该变为下一个（根据第一次加载时的随机性），或者随机再次不重复。

Answer 1

这很简单，只需使用一个数组。你的意思有点混淆，“所以每次改变都不会有重复。”如果这还不够，请告诉我，以及如何/为何。

function chgImg(array, index){
    var img = // Get logo element here
    img.src = array[index % 9];
}

var array = ["image/path/one.ext",
             "image/path/two.ext",
             "image/path/three.ext",
             "image/path/four.ext",
             "image/path/five.ext",
             "image/path/six.ext",
             "image/path/seven.ext",
             "image/path/eight.ext",
             "image/path/nine.ext",
             "image/path/ten.ext"];
var curPic = 0;
var interval = setInterval(function(){ cngImg(array, curPic); curPic++; }, 1000*10);

Answer 2

我设法做到了。如果有人有同样的问题，这是我的解决方案

<script type = "text/javascript">
    var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    function shuffle(o) {
       for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
       return o;
      };
      var random = shuffle(numbers);

      var images = [], x = -1;
      images[0] = "image1.jpg";
      images[1] = "image1.jpg";
      images[2] = "image1.jpg";
      images[3] = "image1.jpg";
      images[4] = "image1.jpg";
      images[5] = "image1.jpg";
      images[6] = "image1.jpg";
      images[7] = "image1.jpg";
      images[8] = "image1.jpg";
      images[9] = "image1.jpg";

      var links = [], x = -1;
      links[0] = "link1";
      links[1] = "link";
      links[2] = "link";
      links[3] = "link";
      links[4] = "link";
      links[5] = "link";
      links[6] = "link";
      links[7] = "link";
      links[8] = "link";
      links[9] = "link";
  function zmiana() {
            shuffle(numbers);
          document.getElementById("img1").src = images[numbers[0]];
          document.getElementById("bannerLink1").href = links[numbers[0]]; 
          document.getElementById("img2").src = images[numbers[1]];
          document.getElementById("bannerLink2").href = links[numbers[1]];
          document.getElementById("img3").src = images[numbers[2]];
          document.getElementById("bannerLink3").href = links[numbers[2]];
          document.getElementById("img4").src = images[numbers[3]];
          document.getElementById("bannerLink4").href = links[numbers[3]];
          document.getElementById("img5").src = images[numbers[4]];
          document.getElementById("bannerLink5").href = links[numbers[4]];
          document.getElementById("img6").src = images[numbers[5]];
          document.getElementById("bannerLink6").href = links[numbers[5]];
          document.getElementById("img7").src = images[numbers[6]];
          document.getElementById("bannerLink7").href = links[numbers[6]];
          document.getElementById("img8").src = images[numbers[7]];
          document.getElementById("bannerLink8").href = links[numbers[7]];
          document.getElementById("img9").src = images[numbers[8]];
          document.getElementById("bannerLink9").href = links[numbers[8]];
          document.getElementById("img10").src = images[numbers[9]];
          document.getElementById("bannerLink10").href = links[numbers[9]];
      }
 function logotypy() {

       setInterval(zmiana, 5000);
       zmiana();
  }
     </script>
  <img src="image_for_worpress_onload" onload = "logotypy()" style="display: none">

   <a id="bannerLink1" href="">
   <img id="img1" src="" style="max-width:100%;"></a><br>  
  <a id="bannerLink2" href="">
   <img id="img2" src="" style="max-width:100%;"></a><br>  
  <a id="bannerLink3" href="">
   <img id="img3" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink4" href="">
   <img id="img4" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink5" href="">
   <img id="img5" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink6" href="">
   <img id="img6" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink7" href="">
   <img id="img7" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink8" href="">
   <img id="img8" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink8" href="">
   <img id="img9" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink10" href="">
   <img id="img10" src="" style="max-width:100%;"></a><br>

10个徽标的脚本每10秒更改一次

2 个答案: