javascript css如何設定一個區塊的圖片輪播
- PHPz原創
- 2023-04-21 15:16:30268瀏覽
隨著網路的不斷發展，圖片輪播已成為網站設計和開發的重要組成部分。在這篇文章中，我們將介紹如何使用JavaScript和CSS來建立一個圖片輪播。
首先，我們需要一個HTML模板，以及一些CSS來設定輪播的外觀。
<div class="slider-container">
<div class="slider-wrapper">
<div class="slider-slide">
<img src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="javascript css如何設定一個區塊的圖片輪播" >
</div>
<div class="slider-slide">
<img src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="javascript css如何設定一個區塊的圖片輪播" >
</div>
<div class="slider-slide">
<img src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="javascript css如何設定一個區塊的圖片輪播" >
</div>
<div class="slider-slide">
<img src="/static/imghwm/default1.png" data-src="image4.jpg" class="lazy" alt="javascript css如何設定一個區塊的圖片輪播" >
</div>
</div>
<button class="slider-prev">❮</button>
<button class="slider-next">❯</button>
</div>在此HTML範本中，我們使用一個包含映像的<div>元素作為單獨的幻燈片。我們將把這些投影片放在一個包含所有投影片的父元素中。在底部，我們還有兩個控制幻燈片的「prev」和「next」按鈕。 <p>接下來，我們將使用CSS來設定這張投影片的UI。 </p><pre class='brush:php;toolbar:false;'>.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;
}</pre><p>在這個CSS中，我們先設定了包含輪播的<code><div>元素的位置和大小。然後我們設定了slider-wrapper中每個投影片的位置和大小。這裡的技巧是使每個幻燈片成為flex容器，以便它們可以居中放置圖像。 <p>最後，我們設定了我們的「prev」和「next」按鈕的位置，樣式和功能。 </p>
<p>現在我們已經為我們的輪播投影片設定了其外觀和UI，我們需要使用JavaScript來添加一些邏輯。 </p><pre class='brush:php;toolbar:false;'>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();
});</pre><p>這段程式碼選擇我們的幻燈片和按鈕元素，並添加了單擊操作，以便幻燈片可以向前或向後移動。每個按鈕的點選操作都是由自己的事件偵聽器處理的。在點擊事件中，我們首先檢查幻燈片是否到達了最後一張，如果是，我們將幻燈片索引重設為零。否則，我們只是向前或向後移動一個投影片，然後呼叫moveSlides()函數，以便在投影片組之間切換。 </p>
<p>最後，我們需要添加一個自動輪播功能，這將在沒有使用者乾預的情況下自動輪播幻燈片。 </p><pre class='brush:php;toolbar:false;'>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);
});</pre><p>在這裡，我們使用一個setInterval函數，該函數以5秒的間隔自動向前移動幻燈片。我們還添加了mouseover和mouseout事件監聽器，以便當使用者懸停在投影片上時停止和執行自動輪播。 </p>
<p>好了，我們已經完成了我們的圖片輪播的設計和開發。最終的程式碼如下：</p><pre class='brush:php;toolbar:false;'><div class="slider-container">
<div class="slider-wrapper">
<div class="slider-slide">
<img src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="javascript css如何設定一個區塊的圖片輪播" >
</div>
<div class="slider-slide">
<img src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="javascript css如何設定一個區塊的圖片輪播" >
</div>
<div class="slider-slide">
<img src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="javascript css如何設定一個區塊的圖片輪播" >
</div>
<div class="slider-slide">
<img src="/static/imghwm/default1.png" data-src="image4.jpg" class="lazy" alt="javascript css如何設定一個區塊的圖片輪播" >
</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></pre><p>現在，如果您將這個程式碼複製到您的本機檔案中，並將投影片圖像和路徑替換為您自己的內容，那麼您將獲得一個漂亮的JavaScript和CSS圖片輪播。 </p>
</div>
以上是javascript css如何設定一個區塊的圖片輪播的詳細內容。更多資訊請關注PHP中文網其他相關文章！