設定イメージ間のランダマイザ

Question

var products = jQuery(".products"); 
products.addClass('none_display'); 
products.each(function (index) { 
    if (index < 12) 
     jQuery(this).addClass('block_display'); 
}); 
function getRandomImage(allBanners){ 
    var mqa = window.matchMedia("(min-width: 768px)"); 
    if (mqa.matches) { 
     var allBannersAll = jQuery('.products'); 
     if (allBanners === undefined) 
      allBanners = allBannersAll; 
     else { 
      allBanners = '.products.'+allBanners; 
      allBanners = jQuery(allBanners); 
     } 
     timerId = setInterval(function() { 
      allBannersAll.addClass('none_display'); 
      allBannersAll.removeClass('block_display'); 
      var totalAllBanners = allBanners.length; 
      allBanners.each(function (index) { 
       if (index < 12){ 
        jQuery(this).addClass('block_display'); 
        jQuery(this).removeClass('none_display');   
        // allBannersAll.eq(random2).show(); 
        // var random3 = Math.floor(Math.random() * allBanners.length); 
        // allBanners.eq(random3).show(); 
       } 
       images_vis_inv(); 
      }); 
     }, 4000); 
     function images_vis_inv(){ 
      var visible, 
       non_visible; 
        visible = jQuery(".products.block_display").length; 
        non_visible = jQuery(".products.none_display").length; 
        non_visible_single = jQuery(".products"); 
      non_visible_sing = jQuery(".products.none_display"); 
      visible_sing = jQuery(".products.none_display"); 
      var randomShow = Math.floor(Math.random() * (non_visible)); 
      var randomHide = Math.floor(Math.random() * (visible)) ; 
      non_visible_single.eq(randomShow).addClass('block_display').removeClass('none_display'); 
      non_visible_single.eq(randomHide).addClass('none_display').removeClass('block_display'); 
      console.log('----------------------------'+randomHide +'///'+randomShow); 
      } 
    } 
} 

こんにちは、 私は、PHPでもたらされる一定量の画像を持っています。現在、私はそれらのうち12個だけを表示し、残りはディスプレイなしで隠されています。私は隠されたものと目に見えるものの間で無作為化する必要があります。例えば、可視画像は隠された画像によって変更されますが、それらの数は常に12以下です。 images_vis_inv関数でこれをどのように達成できますか？ありがとうございました。

Answer 1

データ構造を使用して製品情報を保存し、多数の製品のそれぞれについてDOM要素を維持するのではなく、一度に8つずつ表示することは悪い考えではないかもしれません。考えるだけのこと。

今のところ、私はできる限りあなたの現在の実装が推測していることに従います。

この要点は、数秒ごとに1つの製品の配列を使用してシャッフルと混在させたものです。シャッフルされた要素は、新しい順序で親に「再追加」されます。

これを改善する方法はたくさんありますが、あなたが望むものをそのまま実行する可能性があり、コードはかなり単純です。

あなたのご要望に合わせて、私はこの小さなデモを背景色ではなく実際の画像を使用するように変更しました。イメージをロードするのに数回かかることがあります。

// ====================== 
 
// A derivation of Fisher-Yates 
 
// ====================== 
 
function shuffleArray(array) { 
 
    for (var i = array.length - 1; i > 0; i--) { 
 
    var j = Math.floor(Math.random() * (i + 1)); 
 
    var temp = array[i]; 
 
    array[i] = array[j]; 
 
    array[j] = temp; 
 
    } 
 
    return array; 
 
} 
 
// ====================== 
 

 
var allProducts = Array.from(document.querySelectorAll(".product")); 
 

 
setInterval(function(){ 
 
    var currentProducts = allProducts.splice(0,3); 
 
    shuffleArray(allProducts); 
 
    allProducts = allProducts.concat(currentProducts); 
 
    allProducts.forEach(function(product){ product.parentNode.appendChild(product); }) 
 
}, 4000);

.product { 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    margin-bottom: 1em; 
 
    margin-right: 1em; 
 
    display: none; 
 
    text-align: center; 
 
    color: #000; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    border: solid 1px #000; 
 
} 
 

 
/* only show the first "3" children */ 
 
.product:nth-child(-n+3) { display: block; }

<div class="allProducts"> 
 
    <div class="product" style="background-image: url(http://loremflickr.com/100/100/dog);">01</div> 
 
    <div class="product" style="background-image: url(http://loremflickr.com/100/100/cat);">02</div> 
 
    <div class="product" style="background-image: url(http://loremflickr.com/100/100/bird);">03</div> 
 

 
    <div class="product" style="background-image: url(http://loremflickr.com/100/100/paris);">04</div> 
 
    <div class="product" style="background-image: url(http://loremflickr.com/100/100/rio);">05</div> 
 
    <div class="product" style="background-image: url(http://loremflickr.com/100/100/london);">06</div> 
 

 
    <div class="product" style="background-image: url(http://loremflickr.com/100/100/boy);">07</div> 
 
    <div class="product" style="background-image: url(http://loremflickr.com/100/100/girl);">08</div> 
 
    <div class="product" style="background-image: url(http://loremflickr.com/100/100/ball);">09</div> 
 
</div>