javascript实现图片轮播(一次显示多图片)

本文介绍如何使用JavaScript实现一个图片轮播功能,包括HTML布局、CSS样式和JavaScript主要逻辑。内容涵盖创建图片容器、根据图片数量动态生成img元素、按钮控制图片左右移动以及图片宽度设置。目前代码已完成大部分功能,但上传图片和一些优化细节尚未完善。
摘要由CSDN通过智能技术生成

一 主要逻辑

//--------图片轮播设计---------
//让box和window相对滑动
//超出部分不显示
//让图像宽度等于window的百分之xx
//上传图片
//根据图片个数创建img
//点击按钮时左右移动
//实时获取div宽度或者页面改变时候更新

html部分

内容:3个按键,分别是往左、往右、添加图片

	<div class="down_img_button" onclick="img_play_left()">
								<img id="down_img_button1" src="${pageContext.request.contextPath}/bootstrap/img/left.png" >
								</div>
								
								<div id="down_img_window">
												<div id="down_img_box">

									      <img class="down_imgs" src="${pageContext.request.contextPath}/Cloud_AI/Images/B_0-44.jpg" >
									    
								
									   
									      <img class="down_imgs" src="${pageContext.request.contextPath}/Cloud_AI/Images/B_0-45.jpg" >
									   
					
									   
									      <img class="down_imgs" src="${pageContext.request.contextPath}/Cloud_AI/Images/B_0-46.jpg" >
									   		<img class="down_imgs" src="${pageContext.request.contextPath}/Cloud_AI/Images/B_0-44.jpg" >
									   		<img class="down_imgs" src="${pageContext.request.contextPath}/Cloud_AI/Images/B_0-46.jpg" >
												</div>
								</div>
								<div class="down_img_button" onclick="img_play_right()">
								<img id=<
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值