如何为图片添加移动按钮和自动移动几秒钟？答案

【问题标题】：How to add moving buttons and automatic move for several seconds for pictures?如何为图片添加移动按钮和自动移动几秒钟？
【发布时间】：2020-08-02 14:16:43
【问题描述】：

我想添加左右按钮来移动到最后一张或下一张图片+自动移动图像几秒钟。我看过一些教程，但我不知道如何使用底部的按钮向此代码添加代码

左右两侧的按钮

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="slidershow middle">

      <div class="slides">
        <input type="radio" name="r" id="r1" checked>
        <input type="radio" name="r" id="r2">
        <input type="radio" name="r" id="r3">
        <input type="radio" name="r" id="r4">
        <div class="slide s1">
          <img src="img/d1.jpg" alt="">
        </div>
        <div class="slide">
          <img src="img/d2.jpg" alt="">
        </div>
        <div class="slide">
          <img src="img/d3.png" alt="">
        </div>
        <div class="slide">
          <img src="img/d4.jpg" alt="">
        </div>
      </div>

      <div class="navigation">
        <label for="r1" class="bar"></label>
        <label for="r2" class="bar"></label>
        <label for="r3" class="bar"></label>
        <label for="r4" class="bar"></label>

      </div>
    </div>

    <script>
    </script>


  </body>
</html>

【问题讨论】：

标签： html button slide

【解决方案1】：

你必须使用Owl Carousel 2之类的东西

如果要使用默认导航样式，还需要包含 owl.theme.default.css。

将脚本放在 jQuery 之后的标记底部：

<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>

用法用容器元素（div、ul 等）包装您的项目（div、a、img、span、li 等）。只有 owl-carousel 类是强制应用正确样式的：

<div class="owl-carousel owl-theme">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

注意：owl-theme 类是可选的，但如果没有它，您将需要自己设置导航功能的样式。

调用插件函数，你的轮播就准备好了。

$(document).ready(function(){
  $('.owl-carousel').owlCarousel();
});

【讨论】：