CSS
.image-slider {
position: relative;max-width: 100%;overflow: hidden;padding: 20px; /* 添加外部空白 */box-sizing: border-box; /* 确保padding不影响总宽度 */background-color: #f9f9f9; /* 可选：设置背景颜色 */}.slides {display: flex;transition: transform 0.5s ease;}.slide {min-width: 250px; /* 图片最小宽度 */max-width: 250px; /* 图片最大宽度 */margin: 0 10px; /* 在左右增加间隔 */}.slide img {width: 100%;height: auto;border-radius: 8px; /* 可选：设置圆角 */}button {position: absolute;top: 50%;background-color: rgba(255, 255, 255, 0.7);border: none;cursor: pointer;padding: 10px;transform: translateY(-50%);}.prev {left: 10px;}.next {right: 10px;}button {position: absolute;top: 50%;background-color: rgba(255, 255, 255, 0.8);border: none;cursor: pointer;padding: 10px 15px;border-radius: 50%; /* 圆形按钮 */font-size: 24px; /* 增大字体大小 */box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */transition: background-color 0.3s; /* 添加过渡效果 */}button:hover {background-color: rgba(255, 255, 255, 1); /* 悬停时增加透明度 */}.prev {left: 10px;}.next {right: 10px;
}
javascript代码
<script>
let currentIndex = 0;const totalSlides = document.querySelectorAll(‘.slide’).length;const slides = document.querySelector(‘.slides’);// 自动循环滑动const autoSlide = setInterval(() => {moveSlide(1);}, 3000); // 每3秒自动滑动一次function moveSlide(direction) {currentIndex += direction;if (currentIndex < 0) {currentIndex = totalSlides – 1; // 循环到最后一张}if (currentIndex >= totalSlides) {currentIndex = 0; // 循环到第一张}const offset = -currentIndex * (250 + 20); // 250是每张照片的宽度，加上左右间隔slides.style.transform = `translateX(${offset}px)`;}
</script>
区块
<div class=“image-slider”>
<div class=“slides”><div class=“slide”><img src=“图片地址” alt=“Image 1”></div><div class=“slide”><img src=“图片地址” alt=“Image 2”></div><div class=“slide”><img src=“图片地址” alt=“Image 3”></div><div class=“slide”><img src=“图片地址” alt=“Image 4”></div><div class=“slide”><img src=“图片地址” alt=“Image 5”></div><div class=“slide”><img src=“图片地址” alt=“Image 6”></div></div><button class=“prev” onclick=“moveSlide(-1)”>◀</button> <!– 左箭头 —><button class=“next” onclick=“moveSlide(1)”>▶</button> <!– 右箭头 —>
</div>
声明：
1.本网站资源来源于网络收集，如有侵权，请联系站长进行删除处理。请发送邮件至：chensi2024@foxmail.com，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需。
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
4.如下载链接失效，请在当前页留言或私信管理员，24小时必处理结束！
5.本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解。
6.本站提供的资源仅限用于学习交流和研究目的。不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险以及产生法律纠纷与本站无关，您必须在下载后的24个小时之内，从您的电脑/手机中彻底删除。
1.本网站资源来源于网络收集，如有侵权，请联系站长进行删除处理。请发送邮件至：chensi2024@foxmail.com，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需。
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
4.如下载链接失效，请在当前页留言或私信管理员，24小时必处理结束！
5.本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解。
6.本站提供的资源仅限用于学习交流和研究目的。不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险以及产生法律纠纷与本站无关，您必须在下载后的24个小时之内，从您的电脑/手机中彻底删除。
