js实现点击按钮图片左右滚动
要实现点击按钮使图片左右滚动的效果，可以使用JavaScript结合CSS来完成。以下是一个简单的示例：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片滚动示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scroll-container">
<button id="scrollLeft">向左滚动</button>
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<button id="scrollRight">向右滚动</button>
</div>
<script src="script.js"></script>
</body>
</html>CSS部分（styles.css）
.scroll-container {
width: 80%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.image-container {
display: flex;
transition: transform 0.5s ease-in-out;
}
.image-container img {
width: 200px;
height: auto;
margin-right: 10px;
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
cursor: pointer;
}
#scrollLeft {
left: 10px;
}
#scrollRight {
right: 10px;
}JavaScript部分（script.js）
document.addEventListener('DOMContentLoaded', function() {
const imageContainer = document.querySelector('.image-container');
const scrollLeftBtn = document.getElementById('scrollLeft');
const scrollRightBtn = document.getElementById('scrollRight');
let scrollAmount = 0;
scrollLeftBtn.addEventListener('click', function() {
scrollAmount -= 210; // 200px image width + 10px margin
if (scrollAmount < -410) { // Prevent scrolling beyond the last image
scrollAmount = -410;
}
imageContainer.style.transform = `translateX(${scrollAmount}px)`;
});
scrollRightBtn.addEventListener('click', function() {
scrollAmount += 210; // 200px image width + 10px margin
if (scrollAmount > 0) { // Prevent scrolling beyond the first image
scrollAmount = 0;
}
imageContainer.style.transform = `translateX(${scrollAmount}px)`;
});
});解释
- HTML部分：定义了一个包含图片和两个按钮的容器。
- CSS部分：
.scroll-container：设置容器的基本样式，并隐藏溢出部分。.image-container：使用flex布局来排列图片，并添加过渡效果。button：设置按钮的位置和样式。
- JavaScript部分：
- 监听按钮点击事件，根据点击方向调整图片容器的
transform属性，实现滚动效果。 scrollAmount变量用于记录当前的滚动位置，并限制滚动范围，防止超出图片边界。
- 监听按钮点击事件，根据点击方向调整图片容器的
这个示例展示了如何使用JavaScript和CSS实现简单的图片左右滚动效果。你可以根据需要调整图片大小、滚动步长和容器宽度等参数。
相关·内容
1回答
它用双指滑动来放大图片.它将使用箭头键左右滚动。要移动到下一张图片，选项卡到上一个按钮，并使用正确的箭头键移动到下一个，点击回车。在Ubuntu14.04上，有没有一种方法可以让Gnome之眼左右滚动而不用光标移动图片？我正在放大这幅画，使它比它在里面的窗户更大。滚动问题将通过使用两个手指左右滑动来解决，但这也会放大和缩小图片。
图片是一本书，所以我可以阅读它和编
浏览 0提问于2016-11-26得票数 3
在MSN的网站上，有一个我知道的控件，叫做EventList滚动条。有一些小的左右按钮，用户可以点击它们来改变小按钮上方的图像内容。根据用户点击的内容，图片会向左或向右移动。我想知道你能不能让它水平滚动而不是垂直滚动
浏览 1提问于2011-06-25得票数 0
回答已采纳
2回答
我想有一个VC和在VC的中间，我想有一个可滚动的视图，用户可以向左和向右滑动为每个图片，并选择自己的图片。最重要的是，当视图显示图片时，我需要完整地显示一张图片，并且在每一面上，我必须显示左右图像的一半。
镜像数量不超过10个，但每次都会发生变化。当他们点击每一张图片时，它会转到另一个VC并执行特定的操作。因此，图片就像一个带有动作的按钮。图片的数量每次变化，所以我必须有某种类型的容器，以动态读取<
浏览 1提问于2016-03-09得票数 0
有一个按钮是我想要的，当它被点击，用户跳到相关的图像标签滚动。有很多按钮，每个按钮应该滚动屏幕到目标图片。
由于我对clojure世界并不熟悉，所以我不知道如何将js脚本实现到项目中。我已经在views.cljs文件上创建了一个按钮，并向事件发送。但是我应该在哪里实现js部分呢？正如我所发现的，它必须在events.cljs文件中，但是如果它是正确的，我不知道如何实现</e
浏览 10提问于2022-05-12得票数 0
回答已采纳
2回答
我想知道添加“下一步”和“后退”按钮来点击我的图像的最好方法。当前，当您在热点上滚动时，图像会左右滚动。
我试过给图片添加锚点，这很管用，但是有点凌乱。
浏览 2提问于2012-03-14得票数 0
回答已采纳
2回答
我在全屏模式下显示图片库。我使用水平滚动视图来滚动图片。现在，我可以滚动的图片，通过滑动左或右，我使用pagingEnabled启用的道具。但我想增加更多的手势，当用户点击左右(距离边缘一段距离)时，它将自动映射交换手势。我该怎么做？
浏览 1提问于2018-01-24得票数 1
回答已采纳
1回答
嗨，我需要找到一种方法，开始从点击列表视图项目的意图，并显示我的唯一ID的图像在全屏模式，以便我可以滚动左或右，并切换与不同的images.Any想法，我必须这样做？
浏览 1提问于2011-07-28得票数 0
回答已采纳
1回答
幻灯片中的jQuery叠加图像
、、、、
我只是在尝试实现一个幻灯片，就像你在上看到的那样图片1，稍等片刻，淡入文本，淡入可点击按钮，等待3秒，滚动图片2，稍等片刻，淡入文本，淡入可点击按钮，等待3秒，滚动图片3，以此类推。
浏览 1提问于2013-01-16得票数 0
我的客户想要一个水平的团队成员图片行，可以通过单击左右导航箭头进行滚动。什么是做这件事的首选方法，以便它适合于bootstrap中的响应式网格？每个图像上面都有一个标题，下面有一个可点击的按钮，这就是为什么我必须有一行/ ul的div。有没有Jquery插件，或者我应该尝试创建一个比屏幕更宽的div，并使用JavaScript来操作滚动偏移量？
浏览 3提问于2014-09-21得票数 0
我正在尝试创建用户查看产品滚动图像的能力，点击图片上的箭头。是他们允许实现此功能的任何js库或脚本吗?
谢谢你
浏览 7提问于2020-10-07得票数 0
回答已采纳
1回答
我有肯辛顿轻轨球，我刚刚插入，它可以很好地移动光标，左右点击，中间点击，还有第四个按钮，它作为一个后退按钮工作。我可以映射其中一个按钮来启用“滚动模式”吗？
浏览 0提问于2021-04-21得票数 0
回答已采纳
该网站由3张图片组成(左右边和中间)。点击右边的图片后，它会通过jQuery幻灯片/滚动(我猜)和右边的新图片(之前没有加载)移动到中心。
它是如何做到的？
浏览 0提问于2010-07-15得票数 0
回答已采纳
1回答
所以，我在UIWebView上做了一个向上滚动和一个向下滚动按钮。理想情况下，用户可以选择用手指滚动，或者轻敲按钮。就像当他们点击按钮时，它会向下滚动一英寸左右。有没有人知道在这段代码中插入什么来实现滚动效果？
浏览 1提问于2013-05-18得票数 0
回答已采纳
2回答
IOS中的JTcalendar
、、、、
在当前的实现中，当用户在屏幕上滑动时，滚动就会发生。我需要左右两个按钮来支持滚动功能。
为此，我在菜单栏中添加了两个用于左右滚动的按钮，并尝试在单击这两个按钮时调用viewDidScroll()函数。如果需要，我可以分享当前的实现。
浏览 12提问于2016-10-12得票数 2
我正在尝试实现一个集合视图，在每个单元格中都有一个uiscrollview，并且每个滚动视图中都有一些照片。我想这样做：
如果用户单击任何单元格中的图像，它应该展开并显示为集体视图上的弹出窗口。检查哪个按钮已经被按下变得相当困难。有没有更简单的方法来观察点击及其来源？
浏览 4提问于2017-04-26得票数 0
我希望能够在按向右和向左箭头时在RecyclerView中左右滚动，除了滑动时的简单滚动linearLayoutManager.scrollToPositionWithOffset(2, 20);
但是，如何在按下按钮时实现平滑的左右滚动呢？
浏览 0提问于2016-06-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
