javascript - 当用户使用 vanilla javascript 单击右/左可单击图像时如何执行滚动机制

Question

我有一个页面，我希望用户能够通过按右/左图像箭头向右/向左滚动。但我不确定如何将可点击图像连接到html的overflow-x机制以向右/向左滚动。

CSS 包含用户可以滚动的所有图像

.imgScroll{
margin: 0 auto;
width: 70%;
overflow-x: scroll;
overflow-x: hidden;
white-space:nowrap
}

.arrows{(clickable arrows, to scroll right/left)
position: absolute;
opacity: 0.5;
top: 20px;
cursor: pointer;
}

PHP，其中所有图像都设置为滚动框

(while loop execute do the following)
$childImg .= "<img src='../ProductImages/ChildImages/$childName' 
class='imgBotSize' onclick='openNav()'>";

HTML

<div id="botWrapper">
     <?php echo "<p1>" . $pDetails . "</p1>"?>
     <div id="imgBot">
         <div id="imgBoxBot">
             <div class="arrows" style="right: 180px">
                 <img src="../arrow-right.png" width="70px" height="70px">
              </div>
              <div class="arrows" style="left: 180px">
              <img src="../arrow-left.png" width="70px" height="70px">
               </div>
               <div class="imgScroll">
                    <?php echo $childImg;?>
                </div>
          </div>
      </div>
</div>

Answer 1

看起来您正在尝试创建图像轮播。

这里有一个漂亮的图像轮播:kenwheeler.github.io/slick您可以根据需要设置不同的选项来显示它。