代码一
<html lang="cn">
<head>
<title>轮播图</title>
<style>
*{
margin: 0;
padding: 0;
bottom: 0;
list-style: none;
text-decoration: none;
}
a {
text-decoration: none;
color: #333;
outline: none;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(54, 34, 34);
}
.shell {
width: 900px;
height: 500px;
position: relative;
overflow-x: hidden;
border-radius: 5px;
border:10px #fff solid;
box-shadow: 20px 20px 20px rgba(0, 0, 0, .5);
}
.images {
width: 400%;/*4张图片，所以是400%*/
height: 100%;
display: flex;
position: absolute;
left: 0;
transition: .2s;
}
.img {
width: 100%;
background-size: cover;
}
.img:nth-child(1) {
background-image: url(https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150218_banner1.jpg);
}
.img:nth-child(2) {
background-image: url(https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150213_banner2.jpg);
}
.img:nth-child(3) {
background-image: url(https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150207_banner3.jpg);
}
.img:nth-child(4) {
background-image: url(https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150158_banner4.jpg);
}
.min-images {
display: flex;
justify-content: space-evenly;
position: absolute;
bottom: 20px;
width: 40%;
z-index: 999;
right: 10%;
}
.min {
width: 60px;
height: 60px;
/* 鼠标悬浮时显示按钮指针 */
cursor: pointer;
border-radius: 50%;
background-size: cover;
border: 5px solid rgba(255,255,255,.5);
/* 照片偏移层 */
background-position: -20px 0;
}
.min:nth-child(1) {
background-image: url(https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150218_banner1.jpg);
}
.min:nth-child(2) {
background-image: url(https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150213_banner2.jpg);
}
.min:nth-child(3) {
background-image: url(https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150207_banner3.jpg);
}
.min:nth-child(4) {
background-image: url(https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150158_banner4.jpg);
}
.button {
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: space-between;
user-select: none;
}
.button-left,.button-right {
font-size: 50px;
background-color: rgba(160, 190, 255, .7);
padding: 0 20px;
line-height: 500px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- div.shell>ul.images>li.img*3 -->
<div class="shell">
<ul class="images">
<li class="img"></li>
<li class="img"></li>
<li class="img"></li>
<li class="img"></li>
</ul>
<!-- ul.min-images>li.min*3 -->
<ul class="min-images">
<li class="min"></li>
<li class="min"></li>
<li class="min"></li>
<li class="min"></li>
</ul>
<div class="button">
<div class="button-left"><</div>
<div class="button-right">></div>
</div>
</div>
</body>
<script>
let left = document.querySelector('.button-left')
let right = document.querySelector('.button-right')
let min = document.querySelectorAll('.min')
let images = document.querySelector('.images')
// 我们先设置一个index用来计算和控制图片的位置，再设置一个time作为定时器
let index = 0;
let time
// 在这里我们先创建一个position为复用函数，作用就是结合index来定义当前图片的位置的
function position() {
images.style.left = (index * -100) + "%"
}
// 然后我们创建一个复用函数add为加函数，如果当前图片的位置值index大于等于当前图片数量的话，就说明超出了计算范围，所以得清零，如若不然index就加一
function add() {
if(index >= min.length-1) {
index = 0
} else {
index++
}
}
// 反之desc为减函数，如果当前图片的位置值index小于1了，那么他的值就反弹到最顶端，也就是轮播图的最后面，如若不然index就减一
function desc() {
if(index < 1) {
index = min.length-1
} else {
index--
}
}
// 创建一个timer来当做复用时间的函数，，每隔3秒钟index就加一，然后加入增加add函数和desc函数来判断一下，再加入定位函数
function timer() {
time = setInterval(() => {
index++
desc()
add()
position()
}, 3000);
}
// 接下来我们设置一下按钮，left为左边的按钮，因为点击时图片会反方向倒退，所以我们套入desc减函数进去，顺便定位一下
// 当然，点击的时候我们必须先把定时器给停掉再重新执行一遍，不然会在你点击下一张图片时，定时器倒计时一到也跟着生效，这样子就会连跳两张图片了
left.addEventListener('click',()=>{
desc()
position()
clearInterval(time)
timer()
})
right.addEventListener('click',()=>{
add()
position()
clearInterval(time)
timer()
})
// 在弄好左右两个按钮的时候，我们还需要生效下面的小图片按钮，
// 首先我们先遍历一遍，然后获取当前点击的那个小图片按钮的值并赋值给index，这样子就可以随之跳转
for(let i = 0 ;i < min.length; i++) {
min[i].addEventListener('click',()=>{
index = i
position()
clearInterval(time)
timer()
})
}
// 最后的最后我们将定时器开起来，这样子图片就可以自动轮播啦
timer()
</script>
</html>
代码二
<html lang="cn">
<head>
<title>轮播图克隆</title>
<style>
* {
margin: 0;
padding: 0;
bottom: 0;
list-style: none;
text-decoration: none;
}
a {
text-decoration: none;
color: #333;
outline: none;
}
body {
height: 100vh;
}
.container {
position: relative;
box-sizing: border-box;
margin: 0px auto 20px;
width: 900px;
height: 500px;
overflow: hidden;
user-select: none;
}
a {
color: #000;
outline: none;
text-decoration: none;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
transition: left 300ms linear 0ms;
display: flex;
justify-content: flex-start;
box-sizing: border-box;
/* width = 520*(3+1) */
width: 3600px;
height: 100%;
}
.wrapper .slide {
box-sizing: border-box;
width: 900px;
height: 100%;
background: #eee;
overflow: hidden;
}
.wrapper .slide img {
height: 100%;
}
.pagination {
width: 100%;
height: 50px;
position: absolute;
bottom: 30px;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.pagination span {
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0 10px;
background: rgba(0, 0, 0, .5);
cursor: pointer;
}
.pagination .active {
background: skyblue;
}
.navigation {
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
.navigation a {
margin: 0 10px;
width: 50px;
height: 60px;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!-- 轮播图 -->
<div class="container">
<!-- wrapper -->
<div class="wrapper">
<div class="slide">
<img src="https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150218_banner1.jpg" alt="">
</div>
<div class="slide">
<img src="https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150213_banner2.jpg" alt="">
</div>
<div class="slide">
<img src="https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150207_banner3.jpg" alt="">
</div>
<div class="slide">
<img src="https://images.cnblogs.com/cnblogs_com/blogs/722373/galleries/2103452/o_220207150218_banner1.jpg" alt="">
</div>
</div>
<!-- pagination -->
<div class="pagination">
<span class="active"></span>
<span></span>
<span></span>
</div>
<!-- navigation -->
<div class="navigation">
<a href="javascript:;" class="left">L</a>
<a href="javascript:;" class="right">R</a>
</div>
</div>
<script>
let bannerModule = (function () {
let container = document.querySelector('.container'),
wrapper = document.querySelector('.wrapper'),
pagination = document.querySelector('.pagination'), navigation = document.querySelector('.navigation'), paginationList = document.querySelectorAll('span');
let index = 0, interval = 1000, autoTimer = null;
function autoMove() {
index++;
if (index >= 4) {
wrapper.style.transitionDuration = '0ms';
wrapper.style.left = `0px`;
index = 1;
wrapper.offsetLeft;
}
wrapper.style.transitionDuration = '300ms';
wrapper.style.left = (index * -900) + "px";
paginationFocus()
}
// 分页器焦点对齐
function paginationFocus() {
let step = index;
step === 3 ? step = 0 : null;
[].forEach.call(paginationList, (item, index) => {
item.className = step === index ? 'active' : ''
})
}
return {
init() {
autoTimer = setInterval(autoMove, interval)
container.onmouseenter = function () {
clearInterval(autoTimer)
}
container.onmouseleave = function () {
autoTimer = setInterval(autoMove, interval)
}
navigation.onclick = function (e) {
let target = e.target
if (target.tagName === "A") {
// 左按钮
if (target.className === "left") {
index--;
if (index < 0) {
wrapper.style.transitionDuration = '0ms';
wrapper.style.left = (3 * -900) + "px";
index = 1;
wrapper.offsetLeft;
}
wrapper.style.transitionDuration = '300ms';
wrapper.style.left = (index * -900) + "px";
paginationFocus()
return;
}
// 右按钮
autoMove()
}
}
}
}
})();
bannerModule.init()
</script>
</body>
</html>
