Javascript 开始滑块js中的随机图片
我有一个简单的图像滑块,我对JS非常陌生。 这是滑块的HTMLJavascript 开始滑块js中的随机图片,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个简单的图像滑块,我对JS非常陌生。 这是滑块的HTML <a class="thumb-box scroll-to-section" href="#people"> <img src="someimg" class="peoples-img" style="display: none;"> <img src="someimg2" class="peoples-img" style="display: none;"> <img src=
<a class="thumb-box scroll-to-section" href="#people">
<img src="someimg" class="peoples-img" style="display: none;">
<img src="someimg2" class="peoples-img" style="display: none;">
<img src="someimg3" class="peoples-img" style="display: none;">
<img src="someimg4" class="peoples-img" style="display: none;">
<h3 class="thumb-box__title">People</h3>
</a>
下面是JS代码
var-myIndex=0;
转盘()
功能转盘(){
var i;
var x=document.getElementsByClassName(“人民img”);
对于(i=0;ix.length){myIndex=1}
x[myIndex-1].style.display=“block”;
setTimeout(carousel,2000);//每2秒更改一次图像
}
slider在img和img之间工作得很好,但我想用slider来洗牌图像。每次我重新加载页面以打开不同的图像时,有什么建议吗?您可以找到有关如何生成随机数的说明。使用此数字访问数组中的随机元素。这样每次你都会显示一个随机图像。试试这个
var x = document.getElementsByClassName("peoples-img");
var randomIndex = new Array();
function shuffle() {
for(i=0; i<x.length; i++){
randomIndex.push(i);
}
//http://stackoverflow.com/a/18650169/1582080
randomIndex.sort(function() {
return .5-Math.random();
});
}
function carousel() {
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[randomIndex[myIndex-1]].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
var myIndex = Math.floor(Math.random()*x.length);
shuffle();
carousel();
var x=document.getElementsByClassName(“人民img”);
var randomIndex=新数组();
函数shuffle(){
对于(i=0;i x.length){myIndex=1}
x[randomIndex[myIndex-1].style.display=“block”;
setTimeout(carousel,2000);//每2秒更改一次图像
}
var myIndex=Math.floor(Math.random()*x.length);
洗牌();
转盘();
查看此链接:很好,非常感谢:)但每次我重新加载时,它都从不同的图像开始。但是,有没有办法让它一直洗牌,因为当图像开始按顺序通过幻灯片时,我希望它们一直洗牌
var x = document.getElementsByClassName("peoples-img");
var randomIndex = new Array();
function shuffle() {
for(i=0; i<x.length; i++){
randomIndex.push(i);
}
//http://stackoverflow.com/a/18650169/1582080
randomIndex.sort(function() {
return .5-Math.random();
});
}
function carousel() {
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[randomIndex[myIndex-1]].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
var myIndex = Math.floor(Math.random()*x.length);
shuffle();
carousel();