时间戳

首页 > 解决方案 > 如何在 html、css 和 javascript 中创建滑块菜单

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

问题描述

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

例子

<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>

标签： javascripthtmlcss

解决方案

你是这个意思吗：

	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>

推荐阅读