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；
}
要获得随机图像，您需要所有可能图像的数组：

var imgs = [
    'http://www.dogster.com/wp-content/uploads/2015/05/google-dog-search-2014-05.jpg',
    'http://static4.businessinsider.com/image/569fdd9ac08a80bd448b7138/google-is-officially-a-dog-company.jpg',
    'http://static4.businessinsider.com/image/569fdd9ac08a80bd448b7138/google-is-officially-a-dog-company.jpg'
];

要获得一个随机值，请使用：

var img_index = Math.floor( Math.random()*imgs.length );

现在
imgs[img\u index]
是您的
标签的URL

设置图像url（您需要首先选择此标记，当然，让我们假设它具有class
myimage
）：

第一张幻灯片上是否需要随机图像（提供的3个URL之一）？所以每次img标签中都有不同的url？@Anarion是的，没错
document.querySelector('.myimage').src = imgs[img_index];