Javascript 如何在每次加载网站时显示6个不同的图像？

我有一个包含10个图像的div，当任何人访问或重新加载页面时，6个图像中的任何一个都应该以随机排列的方式显示。最后，我随机安排，但我不能控制图像的数量，而且图像正在走出div。有没有办法在每次加载网站时显示6个不同的图像

$（“.image box”）.html（$（“.image box”）.children（）.sort（函数（）{return 0.5-Math.random（）}））；
});
.image框{
身高：100%；
边框：1px实心#e5；
边界半径：8px；
边缘顶部：10px；
空白：nowrap；
溢出：自动；
}
.图像框标题{
填充：10px；
宽度：2200px；
边框底部：1px实心#e5；
边框顶部：0p；
右边框：0px；
左边框：0px；
边界半径：8px 8px 0px 0px；
背景色：#583d72；
颜色：#ff8e71；
}
.测试员{
显示：内联块；
宽度：212px；
高度：200px；
保证金：5px0.5px；
}
#a{
背景色：黑色；
}
#b{
背景颜色：黄色；
}
#c{
背景色：红色；
}
#d{
背景颜色：绿色；
}
#e{
背景颜色：粉红色；
}
#f{
背景色：天蓝色；
}
#g{
背景颜色：橙色；
}
#h{
背景颜色：灰色；
}
#我{
背景色：暗绿色；
}
#j{
背景色：深蓝色；
}

图像
您可以使用CSS定义所有图像都隐藏在
显示：无
中，并且只有前6个图像可见（第一个子项是标题）：

.tester:第n个子项（2），
.测试人员：第n个孩子（3），
.测试人员：第n个孩子（4），
.测试人员：第n个孩子（5），
.测试人员：第n个孩子（6），
.测试人员：第n个孩子（7）{
显示：内联块；
}

此外，您的标题的宽度为2200px，这似乎是不必要的，因为它定义了
display:block
。因此，您可以省略宽度（这是图像脱离div的原因）

因为标题也是图像框的子项，所以它也会被洗牌。因此，你应该让它成为洗牌后的第一个孩子：

$(".image-box").prepend($(".image-box-title").detach());

工作示例：


$（“.image box”）.html（$（“.image box”）.children（）.sort（函数（））{
返回0.5-Math.random（）
}));
$（“.image-box”）.prepend（$（.image-box-title”）.detach（）
.image框{
身高：100%；
边框：1px实心#e5；
边界半径：8px；
边缘顶部：10px；
空白：nowrap；
溢出：自动；
}
.图像框标题{
填充：10px；
/*宽度：2200px；不需要*/
边框底部：1px实心#e5；
边框顶部：0p；
右边框：0px；
左边框：0px；
边界半径：8px 8px 0px 0px；
背景色：#583d72；
颜色：#ff8e71；
}
.测试员{
显示：无；
宽度：212px；
高度：200px；
保证金：5px0.5px；
}
#a{
背景色：黑色；
}
#b{
背景颜色：黄色；
}
#c{
背景色：红色；
}
#d{
背景颜色：绿色；
}
#e{
背景颜色：粉红色；
}
#f{
背景色：天蓝色；
}
#g{
背景颜色：橙色；
}
#h{
背景颜色：灰色；
}
#我{
背景色：暗绿色；
}
#j{
背景色：深蓝色；
}
.测试人员：第n个孩子（2），
.测试人员：第n个孩子（3），
.测试人员：第n个孩子（4），
.测试人员：第n个孩子（5），
.测试人员：第n个孩子（6），
.测试人员：第n个孩子（7）{
显示：内联块；
}

图像