现在位置: 首页 / HTML / 正文

利用input标签实现图片滑动

  • yatoonly
  • HTML
  • 2025-01-02
  • 73热度
  • 0评论

一、用到的样式

  • 定义一个容器用来定位显示框和标签框
.container{
display: flex;
flex-direction: column;
align-items: center;
}
  • 定义一个标签，最终通过点击这个标签实现图片滑动
.div-lable{
width:20px;
height:10px;
margin-left:10px;
background-color: rgb(241, 242, 243);
border-radius: 6px;
}
  • 定义鼠标滑过标签时的效果
.div-lable:hover{
cursor: pointer;
background-color: rgb(176, 211, 241);
}
  • 定义显示框容器
.img-container{
display: flex;
overflow: hidden;
width:400px;
height:290px;
border: solid 1px #5a03ef;
}
  • 定义一个容器，用来存放多个标签
.lable-container{
display: flex;
position:relative;
top:-20px;
left: 0px;
}
  • 定义图片容器
.div-con{
position:relative;
TOP:0PX;
left: 0px;
width: 400px;
height: 310px;
border:solid 0px #060505;
transition: ALL 100MS linear;
}
  • 定义选择器，与对应的标签一一对应
#a:checked~.div-con{
TOP:0PX;
left: 0px;
}
#b:checked~.div-con{
TOP:0PX;
left: -400px;
}
#c:checked~.div-con{
TOP:0PX;
left: -800px;
}
#d:checked~.div-con{
TOP:0PX;
left: -1200px;
}
#e:checked~.div-con{
TOP:0PX;
left: -1600px;
}
  • 定义图片
.div-img1{
width: 400px;
height: 290px;
background-color: rgb(217, 194, 164);
}
.div-img2{
width: 400px;
height: 290px;
background-color: rgb(95, 216, 47);
}
.div-img3{
width: 400px;
height: 290px;
background-color: rgb(210, 76, 94);
}
.div-img4{
width: 400px;
height: 290px;
background-color: rgb(175, 2, 2);
}
.div-img5{
width: 400px;
height: 290px;
background-color: rgb(27, 39, 120);
}

二、body文件

  • 最外层生成一个容器，高、宽自动
<div class="container">
  • 图片容器，横向排列，超出显示框的部分进行隐藏，input元素是隐藏显示的
<div class="img-container">
            <input type="radio" name="1" id="a">
            <input type="radio" name="1" id="b">
            <input type="radio" name="1" id="c" checked>
            <input type="radio" name="1" id="d">
            <input type="radio" name="1" id="e">
            <div  class="div-con">
                <div class="div-img1"></div>
            </div>
            <div  class="div-con">
                <div class="div-img2"></div>
            </div>
            <div  class="div-con">
                <div class="div-img3"></div>
            </div>
            <div  class="div-con">
                <div class="div-img4"></div>
            </div>
            <div  class="div-con">
                <div class="div-img5"></div>
            </div>
</div>
  • 标签容器，横向排列

<div class="lable-container">
            <label for="a">
                <div class="div-lable"></div>
            </label>		
            <label for="b">
                <div class="div-lable"></div>
            </label>
            <label for="c">
                <div class="div-lable"></div>
            </label>		
            <label for="d">
                <div class="div-lable"></div>
            </label>		
            <label for="e">
                <div class="div-lable"></div>
            </label>				
</div>
实现效果：点击相应标签切换图片

三、整体代码


<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	
	<style>
		input{
			display: none;
		}
        .container{
            display: flex;
			flex-direction: column;
			align-items: center;
        }
		body{
			display: flex;
			flex-direction: column;
			justify-self:center;
			align-items: center;
		}
		.div-lable{
			width:20px;
            height:10px;
            margin-left:10px;
            background-color: rgb(241, 242, 243);
            border-radius: 6px;
		}
        .div-lable:hover{
            cursor: pointer;
            background-color: rgb(176, 211, 241);
        }
        .img-container{
            display: flex;
            overflow: hidden; 
            width:400px;
            height:290px;
            border: solid 1px #5a03ef;
        }
        .lable-container{
            display: flex;
            position:relative;
            top:-20px;
            left: 0px;
        }
		.div-con{
			position:relative;
			TOP:0PX;
			left: 0px;
			width: 400px;
			height: 310px; 
			border:solid 0px #060505;
			transition: ALL 100MS linear;
		}
		
		#a:checked~.div-con{
			TOP:0PX;
			left: 0px;
		}
		#b:checked~.div-con{
			TOP:0PX;
			left: -400px;
		}
		#c:checked~.div-con{
			TOP:0PX;
			left: -800px;
		}
		#d:checked~.div-con{
			TOP:0PX;
			left: -1200px;
		}
		#e:checked~.div-con{
			TOP:0PX;
			left: -1600px;
		}
		.div-img1{
			width: 400px;
			height: 290px;
			background-color: rgb(217, 194, 164);
		}
		.div-img2{
			width: 400px;
			height: 290px;
			background-color: rgb(95, 216, 47);
		}
		.div-img3{
			width: 400px;
			height: 290px;
			background-color: rgb(210, 76, 94);
		}
		.div-img4{
			width: 400px;
			height: 290px;
			background-color: rgb(175, 2, 2);
		}
		.div-img5{
			width: 400px;
			height: 290px;
			background-color: rgb(27, 39, 120);
		}
		
	</style>
	
</head>
<body>
    <div class="container">
        <div class="img-container">
            <input type="radio" name="1" id="a">
            <input type="radio" name="1" id="b">
            <input type="radio" name="1" id="c" checked>
            <input type="radio" name="1" id="d">
            <input type="radio" name="1" id="e">
            <div  class="div-con">
                <div class="div-img1"></div>
            </div>
            <div  class="div-con">
                <div class="div-img2"></div>
            </div>
            <div  class="div-con">
                <div class="div-img3"></div>
            </div>
            <div  class="div-con">
                <div class="div-img4"></div>
            </div>
            <div  class="div-con">
                <div class="div-img5"></div>
            </div>
        </div> 

        <div class="lable-container">
            <label for="a">
                <div class="div-lable"></div>
            </label>		
            <label for="b">
                <div class="div-lable"></div>
            </label>
            <label for="c">
                <div class="div-lable"></div>
            </label>		
            <label for="d">
                <div class="div-lable"></div>
            </label>		
            <label for="e">
                <div class="div-lable"></div>
            </label>				
        </div>	
    </div>
</body>
</html>