特定于HTML的幻灯片

Question

这是我浏览器赛车游戏的进步。如您所见，通过单击汽车下方的按钮，汽车可以旋转。但是我想做的是删除这些按钮并执行以下操作：我将鼠标左键按住在汽车上，然后将鼠标移向某个方向（向左或向右）。

如果幻灯片在左侧，则幻灯片将我带到上一张照片；如果幻灯片在右侧，则幻灯片将向前移动1张照片。如果我必须说一个字，我想像需要速度一样旋转汽车。我知道这段代码很简单，但是在Google或此站点的任何地方都找不到帮助。

这也是我的汽车幻灯片的代码。

<div class="w3-content w3-display-container">

        <div class="w3-display-container mySlides">
    <img src="../styles/test/12.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
      <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
<div class="w3-display-container mySlides">
    <img src="../styles/test/1.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
    <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
        <div class="w3-display-container mySlides">
    <img src="../styles/test/2.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
      <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
        <div class="w3-display-container mySlides">
    <img src="../styles/test/3.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
      <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
        <div class="w3-display-container mySlides">
    <img src="../styles/test/4.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
      <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
        <div class="w3-display-container mySlides">
    <img src="../styles/test/5.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
      <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
<div class="w3-display-container mySlides">
    <img src="../styles/test/6.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
      <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
        <div class="w3-display-container mySlides">
    <img src="../styles/test/7.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
      <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
        <div class="w3-display-container mySlides">
    <img src="../styles/test/8.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
      <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
        <div class="w3-display-container mySlides">
    <img src="../styles/test/9.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
      <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
        <div class="w3-display-container mySlides">
    <img src="../styles/test/10.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
      <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
        <div class="w3-display-container mySlides">
    <img src="../styles/test/11.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
      <h3 style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F; color: aqua;">ROTATE</h3>
  </div>
</div>
        

<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10094;</button>
<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10095;</button>

</div>