JavaScript 轮播图（PC端）
Posted 乱舞春秋__
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 轮播图（PC端）相关的知识，希望对你有一定的参考价值。
功能：
1.自动循环播放，小圈随图片切换颜色
2.点击左右按钮，切换图片
3.点击小圆圈可切换至对应的图片
完整代码如下：
结构与样式：
<!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>焦点图</title>
<script src="animate.js"></script>
<script src="loop.js"></script>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?50hsza');
src: url('fonts/icomoon.eot?50hsza#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?50hsza') format('truetype'),
url('fonts/icomoon.woff?50hsza') format('woff'),
url('fonts/icomoon.svg?50hsza#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
body {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.banner {
margin: 100px 50px;
position: relative;
width: 1200px;
height: 415px;
overflow: hidden;
}
.banner ul {
position: absolute;
left: 0;
width: 500%;
height: 100%;
}
.banner ul li {
float: left;
width: 20%;
height: 100%;
}
.banner ul img {
width: 100%;
height: 100%;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
line-height: 40px;
background-color: rgba(0, 0, 0, .3);
text-align: center;
font-size: 18px;
color: #fff;
font-family: 'icomoon';
z-index: 1;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
left: 510px;
bottom: 28px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
border: 2px solid rgba(0, 0, 0, .5);
margin: 0 3px;
border-radius: 50%;
cursor: pointer;
}
.current {
background-color: #fff;
}
</style>
</head>
<body>
<div class="banner">
<a href="javascript:;" class="arrow-l"></a>
<a href="javascript:;" class="arrow-r"></a>
<ul>
<li><a href="#"><img src="images/loop1.webp"></a></li>
<li><a href="#"><img src="images/loop2.webp"></a></li>
<li><a href="#"><img src="images/loop3.webp"></a></li>
<li><a href="#"><img src="images/loop4.webp"></a></li>
</ul>
<ol class="circle"></ol>
</div>
</body>
</html>JS代码：
window.addEventListener('load', function () {
var banner = this.document.querySelector('.banner');
var arrow_l = this.document.querySelector('.arrow-l');
var arrow_r = this.document.querySelector('.arrow-r');
banner.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null;
});
banner.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function () {
arrow_r.click();
}, 2000);
});
var ul = banner.querySelector('ul');
var ol = banner.querySelector('.circle');
var bannerWidth = banner.offsetWidth;
for (var i = 0; i < ul.children.length; i++) {
var li = this.document.createElement('li');
li.setAttribute('index', i);
ol.appendChild(li);
li.addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
animate(ul, -index * bannerWidth);
num = index;
circle = index;
});
}
ol.children[0].className = 'current';
var firstClone = ul.children[0].cloneNode(true);
ul.appendChild(firstClone);
var num = 0;
var circle = 0;
var flag = true;
arrow_r.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
circle++;
if (circle == ol.children.length) {
circle = 0;
}
animate(ul, -num * bannerWidth, function () {
flag = true;
});
circleChange();
}
});
arrow_l.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * bannerWidth + 'px';
}
num--;
circle--;
/* if (circle < 0) {
circle = ol.children.length - 1;
} */
circle = circle < 0 ? ol.children.length - 1 : circle;
animate(ul, -num * bannerWidth, function () {
flag = true;
});
circleChange();
}
});
function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
};
var timer = setInterval(function () {
arrow_r.click();
}, 2000);
});animate函数：
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
/* if (callback) {
callback();
}; */
callback && callback();
};
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target - obj.offsetLeft) / 10);
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
};效果图：
以上是关于JavaScript 轮播图（PC端）的主要内容，如果未能解决你的问题，请参考以下文章