左右按钮实现滚动轮播Demo（js手搓版本）

呼啦啦呼啦啦啦啦啦啦

于 2023-12-19 16:04:59 发布

阅读量883

点赞数 7

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_51759592/article/details/135084533

版权

提示：适用于当放置按钮空间区域有限，通过左右箭头实现有限空间放置更多的按钮的情形，自适应布局的简单Demo支持二次开发和改造

文章目录

效果图
Demo源码
解释说明
总结

效果图

在这里插入图片描述
在该区域存在五个按钮，点击左边按钮向左边滚动，点击右边按钮向右边滚动。如果你想要这种Demo效果你可以接着往下看。

Demo源码

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
    width: 86%;
    overflow: hidden; /* 隐藏超出容器宽度的内容 */
    white-space: nowrap; /* 禁止换行 */
    font-size: 0;/* 消除div之间的间距如果需要间距把这个删除 */
    display: inline-block;
    }
    .item {
      width: 31.3%; /* div宽度 */
      display: inline-block;
      font-size: 1rem;/* 字体大小 */
      color: white;/* 字体大小 */
      text-align: center;/* 内容居中显示 */
      cursor: pointer;/* 鼠标悬浮显示手 */
      margin-left: 1%;
      margin-right: 1%;
    }
    #leftBtn{
    	margin-right: 1%;
    }
    #rightBtn{
    	margin-left: 1%;
    }
    .active {
     border: 3px solid cornflowerblue;/* 选中时候展示样式 */
    }
  </style>
</head>
<body>
<div style="width: 30%; display: flex; justify-content:center; align-items: center;">
<button id="leftBtn" >左</button>
  <div class="container" >
    <div class="item" style="background-color: red;">一号</div>
    <div class="item" style="background-color:lightpink;">二号</div>
    <div class="item" style="background-color: green;">三号</div>
    <div class="item" style="background-color: red;">四号</div>
    <div class="item" style="background-color: purple;">五号</div>
  </div>
<button id="rightBtn" >右</button>
</div>
  <script>
    var container = document.querySelector('.container');
    var leftBtn = document.getElementById('leftBtn');//获得左边按钮
    var rightBtn = document.getElementById('rightBtn');//获得右边按钮
    var itemWidth = container.offsetWidth;
    leftBtn.addEventListener('click', function() {
      container.scrollLeft -= itemWidth/3;
    });
    rightBtn.addEventListener('click', function() {
     container.scrollLeft += itemWidth/3;
    });
    var items = document.querySelectorAll('.item');
    items.forEach(function(item) {
    item.addEventListener('click', function() {
      // 移除其他选项卡上的 active 类名
      items.forEach(function(otherItem) {
        otherItem.classList.remove('active');
      });
      // 给点击的选项卡添加 active 类名
      item.classList.add('active');
      // 处理点击事件逻辑
      console.log('点击了', item.textContent);
     });
    });
  </script>
</body>
</html>

解释说明

  <script>
    var container = document.querySelector('.container');
    var leftBtn = document.getElementById('leftBtn');//获得左边按钮
    var rightBtn = document.getElementById('rightBtn');//获得右边按钮
    var itemWidth = container.offsetWidth;
    leftBtn.addEventListener('click', function() {
      container.scrollLeft -= itemWidth/3;
    });
    rightBtn.addEventListener('click', function() {
     container.scrollLeft += itemWidth/3;
    });
    var items = document.querySelectorAll('.item');
    items.forEach(function(item) {
    item.addEventListener('click', function() {
      // 移除其他选项卡上的 active 类名
      items.forEach(function(otherItem) {
        otherItem.classList.remove('active');
      });
      // 给点击的选项卡添加 active 类名
      item.classList.add('active');
      // 处理点击事件逻辑
      console.log('点击了', item.textContent);
     });
    });
  </script>

实现思路：
通过修改 container 元素的 scrollLeft 属性来实现左右滚动效果，将其减去或增加一个div的宽度，即为向左或向右滚动一个div的宽度，便捷算法就是直接算容器的1/3，当然我的需求是放三个按钮每次点击滚动一个，如果是三个按钮每次滚动两个那就是2/3了。如果使用里面div宽度计算，需要考虑外边距。也就是

var item = document.querySelector('.item');
var containerStyles = getComputedStyle(item);
var marginLeft = parseFloat(containerStyles.marginLeft);
var marginRight = parseFloat(containerStyles.marginRight);
var contentWidth = container.offsetWidth;
var totalWidth = marginLeft + marginRight + contentWidth;