图片轮播是网页中常见的功能之一，可以用来展示图片、广告等内容。下面介绍如何使用JavaScript实现图片轮播功能。
1. HTML结构
<div id="slider">
<ul>
<li><img src="image1.jpg" alt=""></li>
<li><img src="image2.jpg" alt=""></li>
<li><img src="image3.jpg" alt=""></li>
<li><img src="image4.jpg" alt=""></li>
</ul>
</div>
其中，ul标签中的每个li标签代表一张图片。
2. CSS样式
#slider {
width: 600px;
height: 400px;
overflow: hidden;
}
#slider ul {
width: 2400px;
height: 400px;
margin: 0;
padding: 0;
list-style: none;
}
#slider li {
float: left;
width: 600px;
height: 400px;
}
#slider img {
width: 100%;
height: 100%;
}
其中，#slider是轮播图容器的id，ul标签的宽度为所有li标签宽度之和，li标签的宽度与#slider容器宽度相同，高度也相同。
3. JavaScript代码
var slider = document.getElementById('slider');
var ul = slider.children[0];
var liCount = ul.children.length;
var currentIndex = 0;
var intervalId;
function slideTo(index) {
if (index < 0 || index >= liCount) {
return;
}
ul.style.left = -index * 600 + 'px';
currentIndex = index;
}
function slideNext() {
slideTo(currentIndex + 1);
}
intervalId = setInterval(slideNext, 3000);
slider.onmouseover = function() {
clearInterval(intervalId);
};
slider.onmouseout = function() {
intervalId = setInterval(slideNext, 3000);
};
其中，slider代表轮播图容器，ul代表图片列表，liCount为图片数量，currentIndex为当前显示的图片下标。slideTo函数用于切换图片，slideNext函数用于切换到下一张图片。intervalId为定时器的id，用于清除定时器。onmouseover和onmouseout事件用于在鼠标移入和移出时暂停和恢复自动轮播。
通过以上步骤，即可实现JavaScript图片轮播功能。
