先上示例：
附上代码
- 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">
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>
<title>轮播图</title>
</head>
<body>
<div class="container">
<!-- 左侧按钮 -->
<a rel="nofollow" href="#" class="arrow-l"><</a>
<!-- 右侧按钮 -->
<a rel="nofollow" href="#" class="arrow-r">></a>
<ul class="foucs">
<li><a rel="nofollow" href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a rel="nofollow" href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a rel="nofollow" href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a rel="nofollow" href="#"><img src="images/6.jpg" alt=""></a></li>
</ul>
<ol class="circle">
</ol>
</div>
</body>
</html>
- js
document.addEventListener("DOMContentLoaded", carousel);
function carousel() {
var container = document.querySelector(".container"),
ul = document.getElementsByTagName('ul')[0],
ol = document.getElementsByTagName('ol')[0],
la = document.querySelector(".arrow-l"),
ra = document.querySelector(".arrow-r"),
len = ul.children.length,
num = 0,
flag = true,
foucsWidth = container.offsetWidth;
// 1.左右按钮显示隐藏
container.addEventListener("mouseenter", lrblock);
la.addEventListener("mouseenter", laenter);
ra.addEventListener("mouseenter", laenter);
container.addEventListener("mouseleave", lrnone);
la.addEventListener("mouseleave", laleave);
ra.addEventListener("mouseleave", laleave);
function lrblock() {
la.style.display = "block";
ra.style.display = "block";
clearInterval(autoPlay)
}
function lrnone() {
la.style.display = "none";
ra.style.display = "none";
autoPlay = setInterval(function () {
// 手动调用点击事件
();
}, 2000)
}
function laenter() {
this.style.color = "red";
}
function laleave() {
this.style.color = "#fff";
}
// 2.动态生成小圆点
for (var i = 0; i < len; i++) {
var li = document.createElement('li');
li.setAttribute('index', i);
ol.appendChild(li);
ol.children[0].className = 'current';
li.addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ''
}
this.className = 'current';
//3. 点击小圆点，移动图片 ul移动
var index = this.getAttribute('index');
num = index;
animate(ul, -index * foucsWidth);
})
};
// 4. 点击右侧按钮控制图片
ra.addEventListener('click', function () {
if (flag) {
flag = false;
num++;
if (num === len) {
ul.style.left = 0;
num = 0;
}
animate(ul, - num * foucsWidth, function () {
flag = true
});
// 5. 小圆点和图片对应
for (var i = 0; i < len; i++) {
ol.children[i].className = '';
}
ol.children[num].className = 'current';
}
})
// 5. 点击左侧按钮控制图片
la.addEventListener('click', function () {
if (flag) {
flag = false;
num--;
if (num < 0) {
ul.style.left = (len - 1) * foucsWidth;
num = len - 1;
}
animate(ul, - num * foucsWidth, function () {
flag = true
});
// 5. 小圆点和图片对应
for (var i = 0; i < len; i++) {
ol.children[i].className = '';
}
ol.children[num].className = 'current';
}
})
// 6. 自动播放
var autoPlay = setInterval(function () {
// 手动调用点击事件
();
}, 2000)
// 动画函数
function animate(obj, target, callback) {
var timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step)
if (obj.offsetLeft === target) {
clearInterval(timer);
callback && callback()
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 10)
}
}
- css
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.container {
width: 800px;
height: 400px;
position: relative;
left: 50px;
top: 50px;
overflow: hidden;
background-color: brown;
color: #fff;
font-size: 20px;
}
.arrow-l,
.arrow-r {
width: 60px;
height: 50px;
display: none;
border-radius: 25px;
position: absolute;
top: calc(50% - 50px);
z-index: 2;
background-color: rgb(125, 148, 168, 0.5);
text-align: center;
line-height: 50px;
color: #fff;
font-size: 30px;
font-weight: bold;
}
.arrow-l {
left: -20px;
}
.arrow-r {
right: -20px;
}
ul.foucs {
width: 10000px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
ul.foucs li {
float: left;
}
ul.foucs li,
ul.foucs li img {
width: 800px;
height: 100%;
}
ol.circle {
height: 30px;
position: absolute;
bottom: 0px;
left: 40%;
z-index: 2;
}
ol.circle li {
width: 20px;
height: 20px;
border-radius: 10px;
float: left;
margin: 0 5px;
background-color: #fff;
}
ol.circle li.current {
background-color: blue;
}
- 主要文件结构
