为了使图片可以轮播，需要在
CSS和JavaScript文件
中添加相应的代码。下面是一个基本的轮播图实现示例：
HTML部分：
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<
link rel="stylesheet" href="
css/style.
css">
</head>
<body>
<div id="lunbo">
<ul id="img">
<
li class="
current"><a href="1.
html"><img src="img/banner1.png" alt=""></a></
li>
<
li><a href="2.
html"><img src="img/banner2.jpg" alt=""></a></
li>
<
li><a href="3.
html"><img src="img/banner3.png" alt=""></a></
li>
</ul>
<ul id="index">
<
li class="
current">1</
li>
<
li>2</
li>
<
li>3</
li>
</ul>
</div>
<script src="js/script.js"></script>
</body>
</
html>
```
CSS部分：
```
css
#lunbo {
width: 600px;
height: 400px;
margin: 0 auto;
position: relative;
}
#img {
width: 600px;
height: 400px;
list-style: none;
position: relative;
overflow: hidden;
}
#img
li {
width: 600px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
#img
li img {
display: block;
width: 100%;
height: 100%;
}
#index {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
#index
li {
display: in
line-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
margin-right: 10px;
text-a
lign: center;
line-height: 20px;
color: #333;
cursor: pointer;
transition: background-color .5s ease-in-out;
}
#index
li.
current {
background-color: #333;
color: #fff;
}
```
JavaScript部分：
```javascript
var index = 0;
var timer = null;
var imgArr = document.querySelectorAll('#img
li');
var indexArr = document.querySelectorAll('#index
li');
var len = imgArr.length;
function init() {
imgArr[0].style.opacity = 1;
indexArr[0].
classList.add('
current');
for (var i = 0; i < len; i++) {
indexArr[i].setAttribute('data-index', i);
indexArr[i].addEvent
Listener('mouseover', function() {
clearInterval(timer);
index = parseInt(this.getAttribute('data-index'));
changeImg();
});
indexArr[i].addEvent
Listener('mouseout', function() {
play();
});
}
play();
}
function play() {
timer = setInterval(function() {
index++;
index = index % len;
changeImg();
}, 2000);
}
function changeImg() {
for (var i = 0; i < len; i++) {
imgArr[i].style.opacity = 0;
indexArr[i].
classList.remove('
current');
}
imgArr[index].style.opacity = 1;
indexArr[index].
classList.add('
current');
}
init();
```
其
中，init()函数用于初始化轮播图，play()函数用于播放轮播图，changeImg()函数用于切换图片。在init()函数
中，需要为小圆点添加鼠标移入和移出事件，以便停止和重新播放轮播图。在play()函数
中，使用setInterval()方法定时切换图片，changeImg()函数用于切换图片并更新小圆点的状态。
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
