Question

我创建了自己的幻灯片按钮，但是当我点击按钮时，按钮旁边的按钮不是按钮的形状。有没有改变这个，以便盒子绕着按钮或根本没有出现？

CSS代码：

.slideshow{
              max-width: 650px;
              position: relative;
              margin: auto;
              margin-top: 20px;
              margin-bottom: 10px;
          }
          /* Next & previous buttons */
         #btnSlPrev, #btnSlNxt {
              cursor: pointer;
              position: absolute;
              top: 50%;
              width: auto;
              margin-top: -22px;
              padding: 2px;
              color: #F00;
              background-color: #039;
              font-weight: bold;
              font-size: 18px;
              transition: 0.6s ease;
              border-radius: 20px 20px 20px 20px;
          }

         #btnSlNxt{
             right: 0;
         }

HTML代码：

 <div class = "slideshow">
          <img id="slide" src="picture" width=288 height=209 alt="Image 1">
          <button id="btnSlNxt"  onclick="nextSlide()">Next</button>
          <button id="btnSlPrev" onclick="prevSlide()">Previous</button>
          <p id="slnum">Slide 1 of 3</p>

          </div>

JavaScript的：

var inum = 1;

  function newSlide(inum)
  {
      var iname = "image name" + inum + ".jpg";
      var newimg = document.getElementById("slide");
      newimg.setAttribute("src", iname);
      var slidenum = "Slide " + inum + " of 3";
      document.getElementById("slnum").innerHTML = slidenum;
  }

  function nextSlide()
  {
      inum = inum + 1;
      newSlide(inum);
      document.getElementById("btnSlPrev").disabled = false;
      if (inum == 3) {
          document.getElementById("btnSlNxt").disabled = true;
      }
  }

  function prevSlide()
  {
      inum = inum - 1;
      newSlide(inum);
      document.getElementById("btnSlNxt").disabled = false;
      if (inum == 1) {
          document.getElementById("btnSlPrev").disabled = true;
      }
  }
  </script>

Answer 1

您所引用的内容仅出现在某些具有预定义样式的浏览器上（例如Chrome）。无论如何这里是一个修复，全局使用CSS中的所有按钮：

button:focus{
    outline: none
}

如何防止盒子围绕幻灯片上的下一个和上一个按钮？

1 个答案: