10个徽标的脚本每10秒更改一次
10个徽标的脚本每10秒更改一次
提问于 2013-11-25 20:37:11
我想在wordpress的左面板显示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上的结果(但理想的是把它放在wordpress窗口小部件)有隐藏的img在一开始，因为我需要插入它作为一个widget到wordpress，所以我需要把onload某处)我不知道怎么做是: 1)使图像加载随机，当页面加载，但都是唯一的(将有10个)-没有重复2)几秒钟后，所有的图像应更改为下一个(根据随机在第一次加载)，或再次随机加载没有重复。
回答 2
Stack Overflow用户
发布于 2013-11-25 21:16:07
这很简单，只需使用数组即可。您所说的“所以每次更改后都不会有重复”的意思有点困惑。如果这还不够，请告诉我，以及如何/为什么。
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);Stack Overflow用户
发布于 2013-12-03 08:23:28
我设法做到了。如果有人有同样的问题，这里是我的解决方案
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20193312
复制相关文章
相似问题
腾讯云开发者
