開始スライダーからのランダムな写真js

Question

私は単純な画像スライダーを持っていて、かなり新しい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="someimg3" class="peoples-img" style="display: none;"> 
    <img src="someimg4" class="peoples-img" style="display: none;">     
    <h3 class="thumb-box__title">People</h3> 
</a> 

、ここでは= 0 JSコード

のvar myIndexあります。 carousel（）;

function carousel() { 
    var i; 
    var x = document.getElementsByClassName("peoples-img"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    myIndex++; 
    if (myIndex > x.length) {myIndex = 1} 
    x[myIndex-1].style.display = "block"; 
    setTimeout(carousel, 2000); // Change image every 2 seconds 
} 

スライダはimgでimgがうまく動作しますが、画像をシャッフルするスライダを作りたいと思います。そして毎回私は別のイメージ、任意の提案を開くためにページをリロードする？

Answer 1

このリンクをチェックしてください。この

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

Answer 2

Here乱数を生成する方法については、こちらをご覧ください。この番号を使用して、配列内のランダムな要素にアクセスします。あなたがランダムなイメージを表示するたびに、この方法です。