Bootstrap滑块/旋转木马

Question

我想制作带有文字的自举旋转木马，在这4个圆圈的顶部，每次“选择/悬停”1个圆圈，右侧圆圈和下方的右侧线条显示。像这样的东西：

谁可以帮我解决这个问题？

Answer 1

这是一个你可以看到的香草JS旋转木马，但是正如其他人所指出的，Stack Overflow不是为你创建项目的服务。您需要更多地研究CSS，这样您才能让旋转木马显示出您想要的样子。

//Changed index so 1 is actually first image, rather than starting at 0 index
var index = 1;
var paused = false;
var slideShow = [];

for (i=0; i<document.getElementsByClassName("slideShow").length; i++) {
  slideShow[i] = document.getElementsByClassName("slideShow")[i];
  slideShow[i].style.display = "none";
}

slideShow[0].style.display = "inline";

var slides = setInterval(function() {
  if (index < slideShow.length) {
    index++;
    showDivs();
  }
  else {
    index = 1;
    showDivs();
  }
},1000);

function control(n) {
  clearInterval(slides);

  if (index+n > slideShow.length) {
    index = 1;
  }
  else if (index+n <= 0) {
    index = slideShow.length;
  }
  else {
    index += n;
  }
  showDivs();
}

function showDivs() {
  //Hide all slideShow elements, and then show only the targeted element
  for (let i=1; i<=slideShow.length; i++) {
    slideShow[i-1].style.display = "none";
  }
  slideShow[index-1].style.display = "inline";
}

<button  onclick="control(-1)" class="arrows" id="left"><</button>
<p class="slideShow">1</p>
<p class="slideShow">2</p>
<p class="slideShow">3</p>
<p class="slideShow">4</p>
<p class="slideShow">5</p>
<button onclick="control(1)" class="arrows" id="right">></button>