滑动或点击卡片试试 滑动卡片设计

高效在表格中，我们将解决水平产品调节滑动器中“上一个”和“下一个”按钮失效的问题。通过scrollIntoView()方法和追踪当前可见的幻灯片索引，可以实现按钮的正确响应。另外，我们重新优化代码，从而更容易维护和更。解决方案

问题滑动器的导航逻辑没有正确跟踪当前激活的幻灯片，导致上一个和下一个按钮无法正确地滑动到相应的幻灯片。解决方案是使用 JavaScript 来动态地添加和删除活动类，并使用scrollIntoView() 方法来平滑滚动到相应的幻灯片。HTML 结构调整

首先，删除 HTML 中一个标签中的 href 属性，然后将 slip__prev 和 slip__next 的 href 设置为“#/”，并添加一个唯一的类名“check”，以供后续的 JavaScript 操作。

lt；div class="；容器滑块容器"；gt； lt；div class="；盒子容器滑块"；gt； lt；a class="；slide__prev"； href="；#/"； title="；上一个"；gt；lt；/agt； lt；a class="；slide__next"； href="；#/"； title="；下一个"；gt；lt；/agt； lt；div class="；幻灯片检查"；gt； lt；div class="；盒子幻灯片"； id="；slides__1"；gt； lt；/divgt； lt；div class="；盒子幻灯片"； id="；slides__2"；gt； lt；/divgt； lt；div class="；盒子幻灯片"； id="；slides__3"；gt； lt；/divgt； lt；div class="；盒子幻灯片"； id=quot；slides__4quot；gt； lt；/divgt； lt；/divgt； lt；div class=quot；slider__navquot；gt； lt；a class=quot；slider__navlinkquot； href=quot；#slides__1quot；gt；lt；/agt； lt；a class=quot；slider__navlinkquot； href=quot；#slides__2quot；gt；lt；/agt； lt；a class=quot；slider__navlinkquot；href=quot；#slides__3quot；gt；lt；/agt； lt；a class=quot；slider__navlinkquot； href=quot；#slides__4quot；gt；lt；/agt； lt；/divgt； lt；/divgt；lt；/divgt；登录后复制JavaScript实现

以下是实现滑动器功能的JavaScript代码，该代码使用scrollIntoView() 方法，并基于当前可见的幻灯片索引，正确响应按钮点击事件。

var next=document.querySelector('.slide__next')；var prev=document.querySelector('.slide__prev')；var length= document.querySelectorAll('.slide').length；var slide=Array.from(document.querySelectorAll('.slide'))；document.querySelector('.slide').classList.add('active')；next.addEventListener('click'，function(e){ e.preventDefault()； let index=slide.indexOf(document.querySelector('.active'))； if(indexlt；(length-1)) { document.querySelector('.slide.active').classList.remove('active')； slide[index 1].classList.add('active')； } document.querySelector('.active').scrollIntoView({ behavior： 'smooth' })；})prev.addEventListener('click'，function(e){ e.preventDefault()； let index=slide.indexOf(document.querySelector('.active'))； if(indexgt；0) { document.querySelector('.slide.active').classList.remove('active')； slip[index-1].classList.add('active')； } document.querySelector('.active').scrollIntoView({behavior： 'smooth' })；})登录后复制

代码解释：获取元素：使用 document.querySelector 和 document.querySelectorAll 获取需要的 HTML 元素，包括 next 和 prev 按钮、所有slide元素。初始化：获取所有slide的网络，并默认给第一个slide活动类。事件添加： for next 和 prev按钮添加点击事件监听器。e.preventDefault()：阻止默认的链接跳转行为。索引获取： 获取当前活动元素的索引。 边界检查：检查当前幻灯片是否是第一个或最后一个幻灯片，超出范围。更新活动类： 删除当前活动元素的活动类，并将其添加到下一个或上一个幻灯片元素。

到滚动视图：使用scrollIntoView({behavior： 'smooth' })方法平滑地滚动到当前活动的slide。代码优化说明使用querySelector和querySelectorAll：使用更现代的querySelector和querySelectorAll API替代getElementsByClassName，提高代码的约束性和效率。缓存幻灯片元素：将slide元素缓存到云端，避免重复查询DOM。添加e.preventDefault()：阻止默认的链接跳转行为，防止页面刷新。使用行为： 'smooth'：使滚动过程更平滑。注意事项确保 HTML 结构与 JavaScript 代码中的选择器匹配。scrollIntoView() 方法的行为可能会影响浏览器而异，建议进行跨浏览器测试。如果滑动器中包含大量内容，可能需要考虑性能优化，例如使用 Intersection Observer API 来延迟加载幻灯片内容。总结

通过使用scrollIntoView()方法和动态地添加/删除活动类，我们可以轻松修复水平产品响应滑动器中的上一个/下一个 按钮失效的问题。同时，通过代码优化，我们可以提高代码的可靠性和效率，使生成更容易。

以上维护就是修复水平产品响应滑动器：prev/next按钮失效问题的详细内容，更多请关注乐哥常识网其他相关文章！