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

使用数据结构来存储产品信息并一次显示8，而不是为众多产品中的每一个维护DOM元素，这可能不是一个坏主意。只是想一想。

目前，我试图尽可能地遵循我猜测的是你当前的实现。

这个问题的关键在于我们使用 shuffle 每隔几秒钟混合一系列产品元素。然后重新添加洗牌元素＆＃34;新订单中的父母。

有很多方法可以改进这一点，但它可以开箱即用，代码也很简单。

根据您的要求，我更改了这个小型演示，以使用实际图像而不是背景颜色。可能需要几次迭代才能加载图像。

＆＃13;

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

＆＃13;

.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; }

＆＃13;

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

＆＃13;

设置图像之间的随机化器不超过长度

1 个答案: