运行效果：
源代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<style type="text/css">
* {
margin: 0px;
padding: 0px
}
#container {
margin: 30px auto;
width: 1280px;
height: 720px;
position: relative;
overflow: hidden;
}
#inner-list {
width: 400%;
position: absolute;
top: 0;
left: 0;
}
#inner-list li {
float: left;
}
#dot-list {
position: absolute;
bottom: 20px;
right: 20px;
}
#dot-list li {
float: left;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
line-height: 20px;
text-align: center;
background: rgba(255, 255, 255, .3);
cursor: pointer;
margin-right: 10px;
}
#dot-list li.cur {
background: rgba(255, 255, 255, .6);
}
.btn-ctrl {
position: absolute;
cursor: pointer;
top: 50%;
font-size: 36px;
color: red;
font-weight: 500;
z-index: 2;
}
#btn-prev {
left: 0px;
}
#btn-next {
right: 0px;
}
</style>
<body>
<div class="container" id="container">
<div id="btn-prev" class="btn-ctrl"><</div>
<div id="btn-next" class="btn-ctrl">></div>
<ul id="inner-list">
<li><img src="https://w.wallhaven.cc/full/nz/wallhaven-nzy6g4.jpg" alt=""/></li>
<li><img src="https://w.wallhaven.cc/full/0w/wallhaven-0w6z64.jpg" alt=""/></li>
<li><img src="https://w.wallhaven.cc/full/42/wallhaven-421zm0.jpg" alt=""/></li>
</ul>
<ul id="dot-list"></ul>
</div>
<script type="text/javascript">
window.onload = function () {
var eleInners = document.getElementById(‘inner-list‘),
eleDots = document.getElementById(‘dot-list‘),
liImgs = eleInners.getElementsByTagName(‘li‘),
liDots = eleDots.children,
elePrev = document.getElementById(‘btn-prev‘),
eleNext = document.getElementById(‘btn-next‘),
LI_WIDTH = liImgs[0].offsetWidth,
TIME_DURATION = 3000,
interval = null,
index = 0,
circle = 0;
//首先是克隆
eleInners.appendChild(liImgs[0].cloneNode(true));
//生成小点点
for (var i = 0, len = liImgs.length - 1; i < len; i++) {
var li = document.createElement(‘li‘);
li.innerHTML = i + 1;
eleDots.appendChild(li);
}
//第一个点高亮
liDots[0].className = ‘cur‘;
//接着是动画，用差值和offsetLeft值和移动的值，给一个speed让它移动
function animate(obj, targetPlace) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//判断移动的位置是向左移动还是向右移动
var speed = obj.offsetLeft > targetPlace ? -15 : 15;
var result = targetPlace - obj.offsetLeft;
//只要移动的差值大于speed，那么就一直让obj.style.left 改变
if (Math.abs(result) > Math.abs(speed)) {
obj.style.left = obj.offsetLeft + speed + ‘px‘
} else {
//否则如果已经移动的，obj.offsetleft与要移动的位置十分接近了，
obj.style.left = targetPlace + ‘px‘;
clearInterval(obj.timer);
}
}, 10)
}
//接着定时器
interval = setInterval(autoplay, 5000);
//向左的autoplay
function autoplay() {
index++;
if (index > liImgs.length - 1) {
eleInners.style.left = 0;//赶快跳回去
index = 1;//找到第二张图片
}
animate(eleInners, -index * LI_WIDTH);
circle++;
if (circle >= liImgs.length - 1) {
circle = 0;//circle回到第一个点
}
for (var i = 0, len = liDots.length; i < len; i++) {
liDots[i].className = ‘‘;
}
liDots[circle].className = ‘cur‘;
}
//向右移动
function moveright() {
index--;
if (index < 0) {
eleInners.style.left = -(liImgs.length - 2) * LI_WIDTH + ‘px‘;
index = liImgs.length - 2;//找到倒数第二张图片
}
animate(eleInners, -index * LI_WIDTH);
circle--;
if (circle < 0) {
circle = liImgs.length - 2;//circle回到最后一个点
}
for (var i = 0, len = liDots.length; i < len; i++) {
liDots[i].className = ‘‘;
}
liDots[circle].className = ‘cur‘;
}
// 鼠标移入，清除定时器
eleInners.addEventListener(‘mouseenter‘, function (event) {
clearInterval(interval);
});
// 鼠标移出，开启定时器
eleInners.addEventListener(‘mouseleave‘, function (event) {
interval = setInterval(autoplay, 5000);
});
// 点击dots
eleDots.addEventListener(‘click‘, function (event) {
clearInterval(interval);
var target = event.target;
var currentTarget = event.currentTarget;
index = target.innerHTML - 0 - 1;
circle = index;
for (var i = 0, len = liDots.length; i < len; i++) {
liDots[i].className = ‘‘;
}
liDots[circle].className = ‘cur‘
animate(eleInners, -index * LI_WIDTH);
});
elePrev.addEventListener(‘click‘, function (event) {
clearInterval(interval);
moveright();
interval = setInterval(autoplay, 5000)
});
eleNext.addEventListener(‘click‘, function (event) {
clearInterval(interval);
autoplay();
interval = setInterval(autoplay, 5000);
});
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/yijiahao/p/11742511.html
时间： 2024-10-28 16:29:48