Question

我有一个主意，但不知道如何执行。我正在使用自转轮播制作一个正在进行中的网页。我想要的是在页面上从n个量池中随机分配3个项目。这样，每次加载页面时，都会有新内容。

有人对如何实现这一目标有任何想法吗？我可以使用与轮播不同的东西。

谢谢！

Answer 1

在这里，您使用jQuery获得商品的长度：

let items = $('.item').length;

然后使用此函数创建一个函数，以根据物品的长度获取随机数：

function getRandomInt(items) {
  return Math.floor(Math.random() * Math.floor(max));
}

然后将其放在Bootstrap轮播函数中：

$('#idOfYourCarousel').carousel(Number(getRandomInt(items)));

，然后将其与点击事件相关联，例如：

$('next').click(function(){
   let items = $('.item').length;
   $('#idOfYourCarousel').carousel(Number(getRandomInt(items)));
});

或自动：

$('#myCarousel').on('slide.bs.carousel', function () {
   let items = $('.item').length;
       $('#idOfYourCarousel').carousel(Number(getRandomInt(items)));
})

Answer 2

假设您有pool并将轮播元素作为对象，则将从变量pool中选择3个随机元素。

let pool = [{id: 1}, {id: 2}, {id: 3}, {id: 4},{id: 5},{id: 6}];
// Number of randoms you want to pick from the pool
let noOfRandoms = 3;

/**
 * Returns a random number between 0 and max (Excluding max)
 */
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function getRandoms() {
  let availableElements = pool;

  let selectedElements = [];
  while (noOfRandoms--) {
    // Get a random integer from 0 to (availableElements.length)
    let selectedIndex = getRandomInt(availableElements.length);
    // Add element at the selectedIndex from availableElements to selectedElements
    selectedElements.push(availableElements[selectedIndex]);
    // Remove the element at selectedIndex from availableElements array
    availableElements.splice(selectedIndex, 1);
  }

  return selectedElements;
}

console.log(getRandoms());

Bootstrap Carousel-随机化

2 个答案: