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>）。

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

以下代码段有几个选项。

将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' )更改为HTML实体，因此无法再执行Next。

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

如果您继续使用<button>来推送幻灯片，可以看到<form>。

将下一个和上一个按钮设为箭头

1 个答案: