Javascript 此滑块中加载的随机图像

我从codepen得到了这个滑块，我想稍后展示一些关于它的工作，例如第一张幻灯片是“摄影”，下一张可以是“插图”，等等

我想有3个图像，是随机选择每次刷新（我现在有一个显示，但有两个其他书面评论在HTML）

这是我的密码

让点=4；
让sliderElem=document.querySelector（“.slider”）；
设dotElems=sliderElem.queryselectoral（“.slider_uu点”）；
让indicatoreem=sliderElem.querySelector（“.slider_uuindicator”）；
Array.prototype.forEach.call（dotElems，dotElem=>{
dotElem.addEventListener（“单击”，e=>{
让currentPos=parseInt（sliderElem.getAttribute（“数据位置”）；
让newPos=parseInt（dotElem.getAttribute（“数据pos”）；
让newDirection=newPos>currentPos？“right”：“left”；
让currentDirection=newPos
滑块{
位置：相对位置；
宽度：100%；
身高：100%；
溢出：隐藏；
}
.滑块{
位置：相对位置；
宽度：400%；
身高：100%；
-webkit变换：-webkit变换0.3s立方贝塞尔（0.51,0.92,0.24,1）；
转换：-webkit转换0.3s立方贝塞尔（0.51,0.92,0.24,1）；
变换：变换0.3s三次贝塞尔（0.51,0.92,0.24,1）；
变换：变换0.3s立方贝塞尔（0.51,0.92,0.24,1），-webkit变换0.3s立方贝塞尔（0.51,0.92,0.24,1）；
改变：转变；
}
.滑块[data pos=“0”].滑块{
-webkit转换：translateX（0%）；
转化：translateX（0%）；
}
.滑块[data pos=“1”].滑块{
-webkit转换：translateX（-25%）；
转化：translateX（-25%）；
}
.滑块[data pos=“2”].滑块{
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
}
.滑块[data pos=“3”].滑块{
-webkit转换：translateX（-75%）；
转化：translateX（-75%）；
}
.滑块{
浮动：左；
宽度：25%；
身高：100%；
}
.滑块\滑块img{
宽度：50%；
显示：块；
保证金：0自动；
}
.滑点{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
位置：绝对位置；
底部：1.5em；
左：50%；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
}
.滑块\点，.滑块\指示器{
显示：块；
边缘：0.5 em；
宽度：1米；
高度：1米；
背景：rgba（255,255,255,0.5）；
边界半径：100px；
}
.滑块指示器{
位置：绝对位置；
背景：白色；
宽度：自动；
}
.滑块\指示器--左侧{
-webkit转换：左0.3s立方贝塞尔（0.51,0.92,0.24,1.15），右0.3s 0.1s立方贝塞尔（0.51,0.92,0.24,1.15）；
过渡：左0.3s三次贝塞尔（0.51,0.92,0.24,1.15），右0.3s三次贝塞尔（0.51,0.92,0.24,1.15）；
}
.slider_uu指示器--右{
-webkit转换：左0.3s 0.1s立方贝塞尔（0.51,0.92,0.24,1.15），右0.3s立方贝塞尔（0.51,0.92,0.24,1.15）；
过渡：左0.3s 0.1s立方贝塞尔（0.51,0.92,0.24,1.15），右0.3s立方贝塞尔（0.51,0.92,0.24,1.15）；
}
.滑块[数据位置=“0”].滑块\指示器{
左：0em；
右：6em；
}
.滑块[数据位置=“1”].滑块\指示器{
左：2米；
右：4em；
}
.滑块[数据位置=“2”].滑块指示器{
左：4em；
右：2米；
}
.滑块[数据位置=“3”].滑块指示器{
左：6em；
右：0em；
}
.中心{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
高度：100vh；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
背景：#333；
}
.滑块{
最大宽度：600px；
最大高度：400px；
盒影：0.20px rgba（0,0,0,0.8）；
}
.slider\u slide:n个子项（1）{
背景#309954；
}
.slider\u slide:第n个子项（2）{
背景：#FFBD3C；
}
.slider\u slide:第n个子项（3）{
背景：#F8593E；
}
.slider\u slide:第n个子项（4）{
背景#4086FA；
}
如果我正确理解您的问题，您希望在每次刷新后更改滑块的初始位置

使用
Math.random
use，您的想法是正确的

我修改了您的代码，添加了
sliderElem.setAttribute（“data pos”，Math.floor（Math.random（）*dots））到您的Javascript代码。这将在加载Javascript文件时设置滑块的初始位置

我还用您建议的图像填充了滑块组件

编辑
我已经更改了代码，在第一张幻灯片中将图像随机化。该幻灯片现在有一个
id=“first slide
，以便更容易找到。
如您所见，现在有一个函数
getRandomImage（）
，它返回随机图像的URL

您可以将更多图像添加到
imgs
数组中，该函数将继续从完整数组中随机选择一个图像

我还将舍入函数从
Math.floor
更改为
Math.round
，以增加最后一张图像出现的机会


让点=4；
让sliderElem=document.querySelector（“.slider”）；
设dotElems=sliderElem.queryselectoral（“.slider_uu点”）；
让indicatoreem=sliderElem.querySelector（“.slider_uuindicator”）；
Array.prototype.forEach.call（dotElems，dotElem=>{
dotElem.addEventListener（“单击”，e=>{
让currentPos=parseInt（sliderElem.getAttribute（“数据位置”）；
让newPos=parseInt（dotElem.getAttribute（“数据pos”）；
让newDirection=newPos>currentPos？“right”：“left”；
让currentDirection=newPos