HTML-слайд-шоу - PullRequest
Новая
       12

HTML-слайд-шоу

0 голосов
/ 18 октября 2018

Это мой прогресс в моей гоночной браузерной игре.Как видите, автомобиль вращается, нажимая кнопки под автомобилем.Но я пытаюсь удалить эти кнопки и сделать следующее: я держу левую кнопку мыши на автомобиле и перемещаю мышь в каком-то направлении (влево или вправо).

Если его оставить, слайд-шоу возвращает меня к моей предыдущей фотографии, если это правильно, слайд-шоу перемещает 1 изображение вперед.Если мне нужно сказать это одним словом, я хочу вращать свою машину, как нуждающаяся в скорости.Я знаю, что этот код очень прост, но я нигде не могу найти помощь в Google или на этом сайте.

enter image description here

Вот также код моегоСлайд-шоу автомобилей. 

<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>
...