腳本10個徽標每10秒更換一次

我想在wordpress中的10個不同圖像（垂直排列）的左側面板中顯示，每10秒會自動更改一次。我找到了很多方法來改變一張圖片，但我不知道如何做到這一點，有10張圖片，所以每次改變後都不會有重複。任何人都可以幫忙編輯：對不起，我之前沒有發佈我的代碼。這是我能做到：腳本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，所以我需要把它加載到某處）我不知道該怎麼做的是： 1）在頁面加載時使圖像加載任意，但是都是唯一的（將會有10個） - 不重複 2）幾秒鐘後，所有圖像應該變爲下一個（根據初次加載時的隨機），或者再次通過隨機而不重複。

來源

2013-11-25 shimon893

請您分享一些代碼，將有用 –

幫助自己，張貼相關的代碼，你已經嘗試... –

這很簡單，只需使用一個數組。有點困惑你的意思，「所以每次改變後都不會有重複。」讓我知道這是不夠的，以及如何/爲什麼。

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

來源

2013-11-25 13:16:06 David

我認爲他想一些隨機的形象，但要確保它不重複...任何方式Q都不符合預期的Q＆A格式。 –

我設法做到了。如果任何人都會有同樣的問題，這裏是我的解決方案

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

來源

2013-12-03 00:23:27 shimon893

腳本10個徽標每10秒更換一次

回答

相關問題