jquery实现点击左右箭头切换

最新推荐文章于 2025-06-02 15:14:02 发布

TinaAsura

最新推荐文章于 2025-06-02 15:14:02 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery 点击

本文链接：https://blog.youkuaiyun.com/srttina/article/details/80681344

该博客详细介绍了如何利用jQuery库，通过点击左右箭头来实现内容的切换效果。主要内容包括HTML布局，CSS样式设计，以及JavaScript事件监听和DOM操作的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分

  <div class="contain">
			<div class="box">
				<ul class="box_wheel">
					<li>111</li>
					<li>222</li>
					<li>333</li>
				</ul>
			</div>
			<div class="btn btn_left"><</div>
			<div class="btn btn_right">></div>
		</div>

css部分

  *{padding: 0;margin: 0;}
		li{list-style: none;}
		.contain{width: 1080px;height: 500px;background: red;margin: 80px auto;position: relative;}
		.box{width: 1040px;height: 500px;margin: 0 20px;position: relative;overflow: hidden;}
		.box_wheel{height: 500px;position: absolute;overflow: hidden;}
		.box_wheel li{width: 1040px;height: 500px;background: pink;text-align: center;line-height: 500px;float: left;}
		.btn{width: 50px;height: 60px;background: bisque;line-height: 60px;text-align: center;color: red;font-size: 30px;cursor: pointer;}
		.btn_left{position: absolute;left: -50px;top: 50%;margin-top: -30px;}
		.btn_right{position: absolute;right: -50px;top: 50%;margin-top: -30px;}

js部分

<script type="text/javascript">
//			获取每个li元素的宽度
			var liW = $(".box_wheel li").width()
//			获取li元素的长度(个数)
			var len = $(".box_wheel li").length
//			计算ul的总宽度
			var ulW = len*liW
//			设置ul的宽度
			$(".box_wheel").css("width",ulW)
			var index = 0 
			$(".btn_left").click(()=>{
				index --  //索引自加
				if(index == -1){//判断如果索引为-1了，就让它为最后一个li元素的索引
					index = len - 1
				}
				showLi(index)
			})
			$(".btn_right").click(()=>{
				index ++  //索引自减
				if(index == len){//判断如果索引超过长度了，就让它为第一个li元素的索引
					index = 0
				}
				showLi(index)
			})
			
			function showLi(index){
				var move = -index * liW 
				$(".box_wheel").stop().animate({"left":move},300)
			}
</script>