So legen Sie einen Block von Bildkarussells in Javascript-CSS fest

Mit der kontinuierlichen Entwicklung des Internets sind Bildkarussells zu einem wichtigen Bestandteil des Website-Designs und der Website-Entwicklung geworden. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und CSS ein Bildkarussell erstellen.

Zuerst benötigen wir eine HTML-Vorlage und etwas CSS, um das Erscheinungsbild des Karussells festzulegen.

<code class="html"><div class="slider-container">
   <div class="slider-wrapper">
      <div class="slider-slide">
         <img src="image1.jpg">
      </div>
      <div class="slider-slide">
         <img src="image2.jpg">
      </div>
      <div class="slider-slide">
         <img src="image3.jpg">
      </div>
      <div class="slider-slide">
         <img src="image4.jpg">
      </div>
   </div>
   <button class="slider-prev">&#10094;</button>
   <button class="slider-next">&#10095;</button>
</div></code>

In dieser HTML-Vorlage verwenden wir ein <div>-Element, das ein Bild als separate Diashow enthält. Wir werden diese Folien in einem übergeordneten Element platzieren, das alle Folien enthält. Unten haben wir außerdem zwei Schaltflächen „Zurück“ und „Weiter“, mit denen die Diashow gesteuert wird. <div>元素作为一个单独的幻灯片。我们将把这些幻灯片放在一个包含所有幻灯片的父元素中。在底部，我们还有两个控制幻灯片的“prev”和“next”按钮。

接下来，我们将使用CSS来设置这个幻灯片的UI。

<code class="css">.slider-container {
   position: relative;
   width: 100%;
   height: 500px;
   overflow: hidden;
}

.slider-wrapper {
   display: flex;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transition: transform 0.5s ease;
}

.slider-slide {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.slider-slide img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.slider-prev,
.slider-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   font-size: 20px;
   border: none;
   cursor: pointer;
   opacity: 0.5;
   transition: opacity 0.2s ease;
}

.slider-next {
   right: 20px;
}

.slider-prev {
   left: 20px;
}

.slider-prev:hover,
.slider-next:hover {
   opacity: 0.8;
}</code>

在这个CSS中，我们首先设置了包含轮播的<div>

Als nächstes werden wir CSS verwenden, um die Benutzeroberfläche dieser Diashow einzurichten.

<code class="javascript">var sliderWrapper = document.querySelector('.slider-wrapper');
var slides = document.querySelectorAll('.slider-slide');
var prevBtn = document.querySelector('.slider-prev');
var nextBtn = document.querySelector('.slider-next');
var slideIndex = 0;

function moveSlides() {
   sliderWrapper.style.transform = "translateX(" + (-slides[slideIndex].offsetLeft) + "px)";
}

nextBtn.addEventListener('click', function() {
   if (slideIndex >= slides.length - 1) {
      slideIndex = 0;
   } else {
      slideIndex++;
   }
   moveSlides();
});

prevBtn.addEventListener('click', function() {
   if (slideIndex <= 0) {
      slideIndex = slides.length - 1;
   } else {
      slideIndex--;
   }
   moveSlides();
});</code>

In diesem CSS legen wir zunächst die Position und Größe des <div>-Elements fest, das das Karussell enthält. Dann legen wir die Position und Größe jeder Folie im Slider-Wrapper fest. Der Trick besteht darin, jede Folie zu einem flexiblen Container zu machen, damit sie das Bild zentrieren kann.

Zuletzt legen wir die Position, den Stil und die Funktionalität unserer Schaltflächen „Zurück“ und „Weiter“ fest.

Da wir nun das Aussehen und die Benutzeroberfläche für unsere Karussell-Diashow eingerichtet haben, müssen wir mithilfe von JavaScript etwas Logik hinzufügen.

<code class="javascript">var sliderInterval = setInterval(function() {
   if (slideIndex >= slides.length - 1) {
      slideIndex = 0;
   } else {
      slideIndex++;
   }
   moveSlides();
}, 5000);

sliderWrapper.addEventListener('mouseenter', function() {
   clearInterval(sliderInterval);
});

sliderWrapper.addEventListener('mouseleave', function() {
   sliderInterval = setInterval(function() {
      if (slideIndex >= slides.length - 1) {
         slideIndex = 0;
      } else {
         slideIndex++;
      }
      moveSlides();
   }, 5000);
});</code>

Dieser Code wählt unsere Folien- und Schaltflächenelemente aus und fügt eine Klickaktion hinzu, damit sich die Folie vorwärts oder rückwärts bewegen kann. Jeder Tastenklick wird von einem eigenen Ereignis-Listener verarbeitet. Beim Klickereignis prüfen wir zunächst, ob die Folie die letzte erreicht hat. Wenn ja, setzen wir den Folienindex auf Null zurück. Andernfalls bewegen wir einfach eine Folie vorwärts oder rückwärts und rufen die Funktion moveSlides() auf, um zwischen Foliengruppen zu wechseln.

Schließlich müssen wir eine Funktion zum automatischen Drehen hinzufügen, die die Folien ohne Benutzereingriff automatisch dreht.

<code class="html"><div class="slider-container">
   <div class="slider-wrapper">
      <div class="slider-slide">
         <img src="image1.jpg">
      </div>
      <div class="slider-slide">
         <img src="image2.jpg">
      </div>
      <div class="slider-slide">
         <img src="image3.jpg">
      </div>
      <div class="slider-slide">
         <img src="image4.jpg">
      </div>
   </div>
   <button class="slider-prev">&#10094;</button>
   <button class="slider-next">&#10095;</button>
</div>

<style>
    .slider-container {
       position: relative;
       width: 100%;
       height: 500px;
       overflow: hidden;
    }
    
    .slider-wrapper {
       display: flex;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       transition: transform 0.5s ease;
    }
    
    .slider-slide {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
    }
    
    .slider-slide img {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
    }
    
    .slider-prev,
    .slider-next {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 50px;
       height: 50px;
       border-radius: 50%;
       background: rgba(0, 0, 0, 0.5);
       color: white;
       font-size: 20px;
       border: none;
       cursor: pointer;
       opacity: 0.5;
       transition: opacity 0.2s ease;
    }
    
    .slider-next {
       right: 20px;
    }
    
    .slider-prev {
       left: 20px;
    }
    
    .slider-prev:hover,
    .slider-next:hover {
       opacity: 0.8;
    }  
</style>

<script>
    var sliderWrapper = document.querySelector('.slider-wrapper');
    var slides = document.querySelectorAll('.slider-slide');
    var prevBtn = document.querySelector('.slider-prev');
    var nextBtn = document.querySelector('.slider-next');
    var slideIndex = 0;

    function moveSlides() {
       sliderWrapper.style.transform = "translateX(" + (-slides[slideIndex].offsetLeft) + "px)";
    }

    nextBtn.addEventListener('click', function() {
       if (slideIndex >= slides.length - 1) {
          slideIndex = 0;
       } else {
          slideIndex++;
       }
       moveSlides();
    });

    prevBtn.addEventListener('click', function() {
       if (slideIndex <= 0) {
          slideIndex = slides.length - 1;
       } else {
          slideIndex--;
       }
       moveSlides();
    });

    var sliderInterval = setInterval(function() {
       if (slideIndex >= slides.length - 1) {
          slideIndex = 0;
       } else {
          slideIndex++;
       }
       moveSlides();
    }, 5000);

    sliderWrapper.addEventListener('mouseenter', function() {
       clearInterval(sliderInterval);
    });

    sliderWrapper.addEventListener('mouseleave', function() {
       sliderInterval = setInterval(function() {
          if (slideIndex >= slides.length - 1) {
             slideIndex = 0;
          } else {
             slideIndex++;
          }
          moveSlides();
       }, 5000);
    });
</script></code>

Hier verwenden wir eine setInterval-Funktion, die die Folie automatisch in Intervallen von 5 Sekunden vorwärts bewegt. Wir haben auch Mouseover- und Mouseout-Ereignis-Listener hinzugefügt, um das automatische Karussell zu stoppen und auszuführen, wenn der Benutzer mit der Maus über die Folie fährt.

Okay, wir haben das Design und die Entwicklung unseres Bilderkarussells abgeschlossen. Der endgültige Code lautet wie folgt: #🎜🎜#rrreee#🎜🎜#Wenn Sie nun diesen Code in Ihre lokale Datei kopieren und das Bild und den Pfad der Diashow durch Ihren eigenen Inhalt ersetzen, erhalten Sie ein schönes JavaScript- und CSS-Bildkarussell. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo legen Sie einen Block von Bildkarussells in Javascript-CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!