Question

我是创建网站的初学者。我需要在网站上创建幻灯片的帮助。我将代码复制并粘贴到了我的网站上，但是幻灯片的显示方式却有所不同（显示为栏）此外，我想禁用第一张幻灯片上的上一个箭头和最后一张幻灯片上的下一个箭头。 https://www.w3schools.com/code/tryit.asp?filename=FZUU76085WOH

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

.mySlides {
  display: none;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Entrée.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg" style="width:100%">

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

为您提供帮助

Answer 1

您需要检查slideIndex += n值（通过单击箭头按钮）是否与您拥有的幻灯片数量相同，如果是，请禁用下一个按钮，因为没有更多的幻灯片。

与上一张幻灯片的逻辑相同。如果索引是从那里开始的，请禁用上一个按钮。

这是一个例子：

var slides = document.getElementsByClassName("mySlides");
var nextBtn = document.getElementById("nextBtn");
var prevBtn = document.getElementById("prevBtn");

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {
  var newIndex = slideIndex += n;

  handleDisabled(newIndex);

  showDivs(newIndex);
}

function showDivs(n) {
  var i;
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = "block";
}

function handleDisabled(newIndex) {
  prevBtn.disabled = false;
  nextBtn.disabled = false;

  if (newIndex === slides.length) {
    nextBtn.disabled = true;
  } else if (newIndex === 1) {
    prevBtn.disabled = true;
  }
}

.mySlides {
  display: none;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Entrée.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg" style="width:100%">

  <button id="prevBtn" disabled class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button id="nextBtn" class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

Answer 2

只要将其设置为n> x.length或n

Answer 3

我根据网站上的示例创建了另一个滑块：

enter link description here

我想在我的wordpress上获得完全相同的滑块，在我将代码粘贴到网站上时购买，我得到代码段的结果:( 请您查看一下（如果可能，请尝试检查一下）。我尝试了几天没有成功

谢谢

$switch-speed: 1s;
$slider-number: 5;
$slider-width: 100% / $slider-number;

$image1: 'https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg';
$image2: 'https://meshrepsy.fr/wp-content/uploads/Entrée.jpg';
$image3: 'https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg';
$image4: 'https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg';
$image5: 'https://meshrepsy.fr/wp-content/uploads/Cure-type.jpg';

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #1C2325;
  color: #eee;
}

.outer-wrapper {
  width: 80%;
  margin: 50px auto;
}

// basic styles
.s-wrap {
  width: 100%;
  margin-bottom: 50px;
  padding-bottom: 55%;
  position: relative;
  border: 2px solid #fff;
  background-color: #efefe8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;

  > input {
    display: none;
  }

  .s-content {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% * $slider-number;
    height: 100%;
    font-size: 0;
    list-style: none;
    transition: transform $switch-speed;
  }

  .s-item {
    display: inline-block;
    width: $slider-width;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .s-item-1 {background-image: url($image1);}
  .s-item-2 {background-image: url($image2);}
  .s-item-3 {background-image: url($image3);}
  .s-item-4 {background-image: url($image4);}
  .s-item-5 {background-image: url($image5);}
}

.s-type-1 {
  .s-control {
    position: absolute;
    bottom: 18px;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    transition-timing-function: ease-out;

    > label[class^="s-c-"] {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
      border: 1px solid #999;
      background-color: #efefe8;
      cursor: pointer;
    }
  }

  .s-nav label {
    display: none;
    position: absolute;
    top: 50%;
    padding: 5px 10px;
    transform: translateY(-50%);
    cursor: pointer;

    &::before,
    &::after {
      content: "";
      display: block;
      width: 8px;
      height: 24px;
      background-color: #fff;
    }

    &::before {margin-bottom: -12px;}

    &.left {
      left: 20px;

      &::before {transform: rotate(45deg);}

      &::after {transform: rotate(-45deg);}
    }

    &.right {
      right: 20px;

      &::before {transform: rotate(-45deg);}

      &::after {transform: rotate(45deg);}
    }
  }

  @for $i from 1 through $slider-number {
    #s-#{$i}:checked {
      & ~ .s-content {transform: translateX(-$slider-width * ($i - 1));}

      & ~ .s-control .s-c-#{$i} {background-color: #333;}

      & ~ .s-nav .s-nav-#{$i} {display: block;}
    }
  }
}

.s-type-2 {
  .s-content {
    animation: slider-animation 50s ease-in-out infinite;

    &:hover {animation-play-state: paused;}
  }
}

@keyframes slider-animation {
  $i: 0;
  $j: 0;
  $times: ($slider-number - 1) * 2;
  @while $i < 100 {
    #{$i}%,
    #{$i + 7}% {
      @if $i < 50 {
        transform: translateX(-$slider-width * $j);
          } @else {
            transform: translateX(-$slider-width * ($times - $j));
              }
    }

    $i: $i + 100 / $times;
    $j: $j + 1;
  }
}

<div class="outer-wrapper">
   <div class="s-wrap s-type-1" role="slider">
    <input type="radio" id="s-1" name="slider-control" checked="checked">
    <input type="radio" id="s-2" name="slider-control">
    <input type="radio" id="s-3" name="slider-control">
    <input type="radio" id="s-4" name="slider-control">
    <input type="radio" id="s-5" name="slider-control">
    <ul class="s-content">
      <li class="s-item s-item-1"></li>
      <li class="s-item s-item-2"></li>
      <li class="s-item s-item-3"></li>
      <li class="s-item s-item-4"></li>
      <li class="s-item s-item-5"></li>
    </ul>
   <div class="s-nav">
      <label class="s-nav-1 right" for="s-2"></label>
      <label class="s-nav-2 left" for="s-1"></label>
      <label class="s-nav-2 right" for="s-3"></label>
      <label class="s-nav-3 left" for="s-2"></label>
      <label class="s-nav-3 right" for="s-4"></label>
      <label class="s-nav-4 left" for="s-3"></label>
      <label class="s-nav-4 right" for="s-5"></label>
      <label class="s-nav-5 left" for="s-4"></label>
    </div>
  </div>

在第一张和最后一张幻灯片上禁用上一个/下一个箭头

3 个答案: