JS 轮播图 带定位
时间: 2023-08-02 15:10:31 浏览: 90
以下是带定位的 JS 轮播图实现示例:
HTML 代码:
```html
<div class="slider-container">
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<div class="slider-nav">
<button class="slider-nav-btn active" data-slide="0"></button>
<button class="slider-nav-btn" data-slide="1"></button>
<button class="slider-nav-btn" data-slide="2"></button>
</div>
</div>
```
CSS 代码:
```css
.slider-container {
position: relative;
}
.slider {
position: relative;
overflow: hidden;
}
.slider img {
display: block;
width: 100%;
height: auto;
}
.slider-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.slider-nav-btn {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background-color: #ccc;
margin: 0 5px;
cursor: pointer;
}
.slider-nav-btn.active {
background-color: #333;
}
```
JavaScript 代码:
```javascript
var slides = document.querySelectorAll('.slider img');
var navBtns = document.querySelectorAll('.slider-nav-btn');
var currentSlide = 0;
// Set the position of the slides
function setSlidePosition(slide, index) {
slide.style.left = index * 100 + '%';
}
// Set the position of the slider container
function setSliderPosition() {
var slider = document.querySelector('.slider');
slider.style.transform = 'translateX(-' + currentSlide * 100 + '%)';
}
// Set the active nav button
function setActiveNavBtn() {
for (var i = 0; i < navBtns.length; i++) {
navBtns[i].classList.remove('active');
}
navBtns[currentSlide].classList.add('active');
}
// Go to the previous slide
function prevSlide() {
if (currentSlide === 0) {
currentSlide = slides.length - 1;
} else {
currentSlide--;
}
setSliderPosition();
setActiveNavBtn();
}
// Go to the next slide
function nextSlide() {
if (currentSlide === slides.length - 1) {
currentSlide = 0;
} else {
currentSlide++;
}
setSliderPosition();
setActiveNavBtn();
}
// Go to a specific slide
function goToSlide(index) {
currentSlide = index;
setSliderPosition();
setActiveNavBtn();
}
// Set the position of each slide
for (var i = 0; i < slides.length; i++) {
setSlidePosition(slides[i], i);
}
// Add event listeners to the nav buttons
for (var i = 0; i < navBtns.length; i++) {
navBtns[i].addEventListener('click', function() {
var slideIndex = parseInt(this.getAttribute('data-slide'));
goToSlide(slideIndex);
});
}
// Add event listeners to the arrow buttons
document.querySelector('.slider-prev').addEventListener('click', prevSlide);
document.querySelector('.slider-next').addEventListener('click', nextSlide);
```
注:此示例中使用了箭头按钮来切换轮播图,需要在 HTML 中添加相应的元素,并在 JavaScript 中添加相应的事件监听器。