如何在 html、css 和 javascript 中创建滑块菜单答案

【问题标题】：How to create a slider menu in html, css, and javascript如何在 html、css 和 javascript 中创建滑块菜单
【发布时间】：2020-02-26 09:11:49
【问题描述】：

这里是网络开发新手。我有兴趣创建某种“滑块菜单”，用户可以通过单击下一个或上一个按钮来查看和选择其中一个选项（附上示例图片）。我已经编写了一些基本的 html，但我不完全确定如何使用 javascript 来实现它。任何帮助将不胜感激

example

<div class = navigationButtons>
  <button class = "prev"> < </button>
</div>

<div class = "select options">
  <div class="o1">
    <button> option1 </button>
  </<div >

  <div class="o2">
    <button> option2 </button>
  </<div >

 <div class="o3">
    <button> option3 </button>
 </div>

 <div class="o4">
    <button> option4 </button>
 </div>
</div>

  <div class = navigationButtons>
    <button class = "next"> > </button>
  </div>

【问题讨论】：

这个问题似乎根本没有包括任何解决问题的尝试。请编辑问题以显示您尝试过的内容，并使用Minimal, Complete, and Verifiable example 显示您遇到的特定障碍。欲了解更多信息，请参阅How to Ask。
请研究分页这个概念。参考这些资源：CSS Pagination、CSS Pagination Examples、Boostrap Pagination、Javascript Pagination

标签： javascript html css

【解决方案1】：

你是不是这个意思：

	var option = 1;
	//next
	document.getElementById("Next").addEventListener("click",displayNext);
	function displayNext(){
		document.getElementById("o"+option).style.display="none";
		option= (option<4)? option+1 : 1;
		document.getElementById("o"+option).style.display="block";
		
	}
	//previous
	document.getElementById("Previous").addEventListener("click",displayPrevious);
	function displayPrevious(){
		document.getElementById("o"+option).style.display="none";
		option= (option>1)? option-1 : 4;
		document.getElementById("o"+option).style.display="block";
		
	}

.navigationButtons{
		float:left;
		margin-right:20px;
		margin-left:20px;
		}
		.container{
			margin-left: auto;
 
text-align:center;  
		}
		#o1{
		display:block;
		float:left}
		#o2{
		display:none;
		float:left}
		#o3{
		display:none;
		float:left}
		#o4{
		display:none;
		float:left}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>		
		<style>
		
		
		</style>
    </head>
    <body>        
		<div class="container ">
			<button class = " navigationButtons" id="Previous">
			  <
			</button>

			<div class = "selectOptions ">
				<button  id="o1"> option1 </button>
				<button  id="o2"> option2 </button>
				<button  id="o3"> option3 </button>
				<button  id="o4"> option4 </button>
			  <button class = " navigationButtons" id="Next">
				> </button>
			  </div>
		</div>
    </body>
    <script src="script.js">        
    </script>
</html>

【讨论】：