javascript实现图片轮播（一次显示多图片）

最新推荐文章于 2024-01-02 07:57:02 发布

蓝莓莓

最新推荐文章于 2024-01-02 07:57:02 发布

阅读量3.7k

点赞数

文章标签： js css html javascript

本文链接：https://blog.csdn.net/qq_45037925/article/details/109680865

版权

本文介绍如何使用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=<