将下一个和上一个按钮变成箭头

Question

我有一个幻灯片，其中包含下一个和上一个按钮（我没有使用 jquery），我需要将下一个和上一个按钮变成箭头，我不知道从哪里开始。我也无法在其他任何地方找到答案。

CSS

.slide {
    display:inline-block;
    position: relative;
}
.slide img {
    display:block;
    max-width: 100%;
    height: 300px;;
    width: 500px;
}
.slide img:hover + .slide-caption {
    opacity: 1;
}

.slide-title {
    margine:0 0 1rem;
}
.slide-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    color: white;
    background-color: rgba( 0, 0, 0, 0.5 );
    opacity:0;
}
.slide-caption:hover {
    opacity: 1;
}
/*div.description {
    color:blue;
}*/

div.prev {
    text-align: left;
}
div.next {
    margin-left:400px;
    margin-top:0px;
}

PHP

while ($row = $result->fetch_assoc()) {
    $pic_array[$count] = $row['pic_url'];
    $titles[$count] = $row['title'];
    $descriptions[$count] = $row['description'];
    $count++;
}

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if ($_POST['action'] == 'Previous') {
        $index = $_POST['i'];
        if ($index == 0) {
            $index = count($pic_array) - 1;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p> $descriptions[$index] </p>
                     </div>
                  </div>";
        }
        else {
            $index--;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p> $descriptions[$index] </p>
                     </div>
                  </div>";
        }
        echo '<form action="gallery.php" method="post">
        <input type="submit" name="action" value="Previous">
        <input type="submit" name="action" value="Next">';
        echo "<input type='hidden' name='i' value= '$index'' >";

    }
    if ($_POST['action'] == "Next") {
        $index = $_POST['i'];
        if ($index == count($pic_array) - 1) {
            $index = 0;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p> $descriptions[$index] </p>
                     </div>
                  </div>";
        }
        else {
            $index++;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p> $descriptions[$index] </p>
                     </div>
                  </div>";
        }

        echo '<form action="gallery.php" method="post">
        <input type="submit" name="action" value="Previous">
        <input type="submit" name="action" value="Next">';
        echo "<input type='hidden' name='i' value= '$index' >";


    }

} else {
    $index = 1;
    echo "<div class='slide'>
            <img src= ".$dir.$pic_array[$index]." />
            <div class='slide-caption'>
                <h3 class='slide-title'> $titles[$index] </h3>
                <p> $descriptions[$index] </p>
            </div>
         </div>";
    echo '<form action="gallery.php" method="post">
        <div class="prev">
                <input type="submit" name="action" value="Previous">
        </div>
        <div class="prev">
        <input type="submit" name="action" value="Next">
        </div>';
    echo "<input type='hidden' name='i' value= '$index' >";
    /*echo "<div class='description'
                <p> $descriptions[$index] </p>
          </div>";*/


}

Answer 1

如果您要继续使用<form> 作为幻灯片的基础，那么我建议使用<button> 而不是<input type="submit">。您将更好地控制您向用户展示的内容以及提交给服务器的内容（因为您使用的是<form>）。

默认情况下，<form> 中的 <button> 将充当提交按钮。按钮允许您设置其中的内容，这比大多数输入允许您执行的操作要灵活得多。

下面的 sn -p 有几个选项。

• 将font-icon 或HTML 实体设置为内容。
• 将图片设置为内容。
• 将图像设置为按钮的背景（您必须定义尺寸才能使用）。

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: 0;
}
button img {
  display: block;
}
.next {
  width: 100px;
  height: 25px;
  background-image: url( http://placehold.it/100x25 );
  background-repeat: no-repeat;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<button value="Next">
  <i class="fa fa-arrow-right fa-2x"></i>
</button>

<br>

<button value="Next">
  <img src="http://placehold.it/100x25">
</button>

<br>

<button class="next" value="Next"></button>

如果您坚持使用表单输入作为分页器元素，您的选择将受到限制。

您的两个主要选项是HTML entities 或图片。

要使用 HTML 实体，您必须将其设置为输入的 value。

要使用图像，您需要使用图像输入 <input type="image" src="path/to/image.jpg">。

.styled-inputs {
  margin: 2.5rem 0;
}
.styled-inputs input[type="submit"] {
  margin: 0.5rem;
  padding: 0;
  font-size: 2rem;
  border: 0;
  background: none;
}

<input type="submit" name="next" value="&raquo;">
<input type="submit" name="next" value="&gt;">
<input type="submit" name="next" value="&rsaquo;">
<input type="submit" name="next" value="&rarr;">
<input type="submit" name="next" value="&xrarr;">
<input type="submit" name="next" value="&xrArr;">
<input type="image" src="http://placehold.it/25x25">

<div class="styled-inputs">
  
  <input type="submit" name="next" value="&raquo;">
  <input type="submit" name="next" value="&gt;">
  <input type="submit" name="next" value="&rsaquo;">
  <input type="submit" name="next" value="&rarr;">
  <input type="submit" name="next" value="&xrarr;">
  <input type="submit" name="next" value="&xrArr;">
  <input type="image" src="http://placehold.it/25x25">
  
</div>

使用 HTML 实体的问题是您无法再执行 if ( $_POST[ 'action' ] == 'Next' )，因为您已将值从 Next 更改为 HTML 实体。

使用<input type="image"> 需要与您现在进行的检查稍有不同。不必让两个具有相同名称的提交输入并检查它们的值，您必须为每个输入设置不同的名称并检查是否设置了一个，因为图像输入不允许您分配值。

如您所见，如果您继续使用 <form> 来驱动幻灯片，则可以使用 <button>。