web实现左右切换功能

最新推荐文章于 2023-03-31 20:41:04 发布

Revival_Liang

最新推荐文章于 2023-03-31 20:41:04 发布

阅读量1.1k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/Revival_Liang/article/details/56840163

版权

web 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
		<style type="text/css">
		div,ul,li{
			margin: 0px;
			padding: 0px;
		}
			.box{
				border: 5px solid orange;
				overflow: hidden;
				width: 500px;
				height: 400px;
				display: inline-block;
				background: green;
				position: relative;
			}
			.box-ul-li1{
				float: left;
				background: orangered;
			}
			.box-ul-li2{
				float: left;
				background: orange;
			}
			.box-ul-li3{
				float: left;
				background: green;
			}
			.box-ul-li1,.box-ul-li2,.box-ul-li3{
				width: 500px;
				height: 400px;
				position: relative;
			}
			.box-ul{
				position: absolute;
				width: 99999px;
				height: 400px;
				list-style: none;
				background: red;
			}
			.button-box{
				top: 50%;
				position: relative;
				width: 500px;
				height: 45px;
				z-index: 1;
			}
			.left-button{
				color: white;
				left: 0px;
				position: absolute;
				font-size: 26px;
				border-style: none;
				width: 50px;
				height: 45px;
				background: rgba(0,0,0,0.4);
			}
			.right-button{
				color: white;
				position: absolute;
				right: 0px;
				font-size: 26px;
				border-style: none;
				width: 50px;
				height: 45px;
				background: rgba(0,0,0,0.4);
			}
			.box-ul-img{
				width: 500px;
				height: 400px;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				var value = 0;
				$(".box").mouseover(function(){
					$(".button-box").css("visibility","visible");
				});
				$(".box").mouseout(function(){
					$(".button-box").css("visibility","hidden");
				});
				//左边的按钮，把ul元素往右边移
				$(".left-button").click(function(){
					if(value >= -500){
					value-=500;
					$(".box-ul").animate({left:value},500);
					}
				});
				//右边的按钮，把ul元素往左边移
				$(".right-button").click(function(){
					if(value <= -500){
					value+=500;
					$(".box-ul").animate({left:value},500);
					}
				});
			});
		</script>
	</head>
	<body style="text-align: center;">
		<div class="box">
			<ul class="box-ul">
				<li class="box-ul-li1"><img class="box-ul-img" src="img/a.jpg"/></li>
				<li class="box-ul-li2"><img class="box-ul-img" src="img/b.jpg"/></li>
				<li class="box-ul-li3"><img class="box-ul-img" src="img/c.jpg"/></li>
			</ul>
			<div class="button-box">
			<button class="left-button"><</button>
			<button class="right-button">></button>
			</div>
		</div>
	</body>
</html>

效果图如下：

Revival_Liang

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web实现左右切换功能

div,ul,li{ margin: 0px; padding: 0px; } .box{ border: 5px solid orange; overflow: hidden; width: 500px; height: 400px; display: inline-block; background: green;
复制链接

扫一扫

专栏目录