带有随机图片的幻灯片答案

【问题标题】：Slideshow with random pics带有随机图片的幻灯片
【发布时间】：2016-11-20 22:56:32
【问题描述】：

所以我用 HTML/CSS/JS 制作了这个小幻灯片，我想让 6 张图片随机出现，而不是 1,2,3.. 更像是 2,3,1..。任何帮助表示赞赏。非常感谢。

JS：

var imagecount = 1;
var total = 6;

function slide(x) {
    var Image = document.getElementById('img');
    imagecount = imagecount + x;
    if(imagecount > total){imagecount = 1;}
    if(imagecount < 1){imagecount = total;}
    Image.src = "images/img"+ imagecount +".jpg";
    ChangeText(imagecount);
}

window.setInterval(function slideA(x) {
    var Image = document.getElementById('img');
    imagecount = imagecount + 1;
    if(imagecount > total){imagecount = 1;}
    if(imagecount < 1){imagecount = total;}
    Image.src = "images/img"+ imagecount +".jpg";
    ChangeText(imagecount);
}, 3000);

function ChangeText(imgNum){
    var allImagesAndText = {1: "Seltene römische Goldmünze", 2: "Römische Funde", 3: "Römische Wandmalerei", 4: "Tutanchamun", 5: "Cheops Pyramide", 6: "Ägyptische Malerei"};
    document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}

CSS：

#container {
  height: 450px;
  width: 650px;
  margin: 20px auto;
  position: relative;
  z-index: 1;
  border: 10px solid #000;
  border-radius: 10px;
}
#img {
  height: 450px;
  width: 650px;
}
#left_holder {
  height: 450px;
  width: 100px;
  position: absolute;
  left: 0px;
  top: 0px;
}
#right_holder {
  height: 450px;
  width: 100px;
  position: absolute;
  right: 0px;
  top: 0px;
}
.left {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  left: 0px;
}
.right {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  right: 0px;
}
#text1 {
  position: absolute;
  color: #fff;
  font-size: 32px;
  background-color: #000;
  opacity: 0.5;
  left: 37%;
  z-index: 2;
}

HTML：

<div id="container">
  <div id="text1">Text</div>
  <img src="images/img1.jpg" id="img" />
  <div id="left_holder">
    <img onClick="slide(-1)" class="left" src="images/arrow_left.png" />
  </div>
  <div id="right_holder">
    <img onClick="slide(1)" class="right" src="images/arrow_right.png" />
  </div>
</div>

【问题讨论】：

标签： javascript html css random slideshow

【解决方案1】：

您可以创建独特的随机图像滑块。所以它不会多次重复图像（Soham 的回答很好，但它会连续多次重复相同的图像）。

类似这样的：

var imagecount = 1;
var total = 6;
var uniqueRandoms = [];

function makeUniqueRandom() {
    if (!uniqueRandoms.length) {
        for (var i = imagecount; i <= total; i++) {
            uniqueRandoms.push(i);
        }
    }
    var index = Math.floor(Math.random() * uniqueRandoms.length);
    var val = uniqueRandoms[index];

    uniqueRandoms.splice(index, 1);

    return val;
}

我使用了this所以答案。

然后在你的代码中调用你需要的函数。

此处为自动滑动的代码示例https://jsfiddle.net/2gra4wk1/

【讨论】：

感谢您的回答。我还有另一个问题，如果我按下右或左箭头键，它会停止自动滑动，如果我按下箭头，它只会更改图片？然后在我没有按箭头后例如 3 秒后继续更改图片？
好吧，您可以将相同的随机函数与 slide() 函数一起使用，并在单击时使用 setTimeout 进行基本自动滑动。这样做的问题是，您将在上一个和下一个按钮单击时获得随机图像，因此您需要存储以前的图像，然后在上一个按钮单击时访问它们。但是这些功能超出了这个问题，所以如果你遇到困难，请尝试自己做或提出新问题:)

【解决方案2】：

你可以添加一个函数：-

    function generateRandom(){
        var x = Math.floor((Math.random() * 6) + 1); //generates random number from 1 to 6
        return x;
    }

然后调用这个函数并适当使用

【讨论】：