html利用js实现轮播图
时间: 2024-01-09 22:05:17 浏览: 25
实现轮播图的核心就是通过 JavaScript 来动态地改变图片的位置。以下是一个简单的 HTML + JS 轮播图实现示例:
HTML 代码:
```html
<div class="slider">
<ul>
<li><img src="img1.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
</ul>
</div>
```
CSS 代码:
```css
.slider {
width: 500px;
height: 300px;
overflow: hidden;
}
.slider ul {
list-style: none;
margin: 0;
padding: 0;
width: 1500px;
position: relative;
left: 0;
transition: left 0.5s ease-in-out;
}
.slider ul li {
float: left;
width: 500px;
height: 300px;
}
```
JavaScript 代码:
```javascript
var slider = document.querySelector('.slider');
var sliderList = slider.querySelector('ul');
var sliderItems = slider.querySelectorAll('li');
var nextBtn = slider.querySelector('.next');
var prevBtn = slider.querySelector('.prev');
var currentIndex = 0;
var itemWidth = sliderItems[0].offsetWidth;
var itemCount = sliderItems.length;
var intervalId;
function moveTo(index) {
if (index < 0) {
index = itemCount - 1;
} else if (index >= itemCount) {
index = 0;
}
currentIndex = index;
sliderList.style.left = -currentIndex * itemWidth + 'px';
}
function moveNext() {
moveTo(currentIndex + 1);
}
function movePrev() {
moveTo(currentIndex - 1);
}
nextBtn.addEventListener('click', moveNext);
prevBtn.addEventListener('click', movePrev);
intervalId = setInterval(moveNext, 3000);
```
通过上面的代码,我们实现了一个简单的轮播图,点击左右箭头或者自动轮播切换图片。当然,这只是一个简单的示例,实际应用中还需要考虑更多的问题,比如图片预加载、响应式布局等等。