轮播图大家肯定都不陌生，因为这是前端最为常见的一个功能，现在随着框架和一些插件的兴起，很少人会去原生的去写轮播图，所以今天带大家写一下原生的轮播图来熟悉一下
最为主要的就是得知道这张图片的宽度，因为每一次移动的距离就是这张图片的宽度，但是宽度我们不能给死，每一张图片的大小是不一样的，所以根据js的clientWidth来获取，这样不管图片是多大都能获得这张图片的大小，第一步的移动距离就完成了，核心部分也就完成了
然后就是选择的定时器，这里一定要用setInterval这个定时器，不能用setTimeout，主要原因就不细说了，大家应该是都很熟悉的。
最后就是轮播到最后一张图片的时候该如何回到第一张图片呢？这里是直接不带动画的跳转到第一张(一会在代码中体现出来)
下面就来看一下代码的实现过程：
首先是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">
<script src="轮播图.js"></script>
</head>
<body>
<footer class="slideshow">
<ul>
<li><a href="#"><img src="image/2.jpg" alt=""></a></li>
<li><a href="#"><img src="image/门.jpg" alt=""></a></li>
<li><a href="#"><img src="image/灵压之旅.jpg" alt=""></a></li>
<li><a href="#"><img src="image/2.png" alt=""></a></li>
<li><a href="#"><img src="image/2.jpg" alt=""></a></li>
</ul>
</footer>
</body>
</html>
接下来就是css的样式，大家根据自己的喜好设置即可:
*{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.slideshow{
position: relative;
width: 1400px;
height: 600px;
margin: 0 auto;
overflow: hidden;
}
.slideshow ul{
width: 600%;
position: absolute;
height: 600px;
left: 0;
top: 0;
/* transition: all 0s; */
}
.slideshow ul li{
float: left;
width: 1400px;
height: 600px;
}
.slideshow ul li a img{
width: 1400px;
height: 600px;
}
最后就是核心部分的js：
window.addEventListener("load", function () {
var a = document.querySelector(".slideshow ul");
// a.style.left="-1400px"
// console.dir(a.children[0])
console.log(a.children.length);
var num = 0;
var len = a.children[0].clientWidth;
console.log(a.children[0].clientWidth);
setInterval(function(){
if(num==a.children.length){
a.style.left="0px";
a.style.transition="left 0s";
num = 1;
}else{
a.style.left=-len*num+"px";
a.style.transition="left 1s";
num++;
}
},1500);
})
希望大家学到东西
本文转载自: https://blog.csdn.net/qq_63656102/article/details/130822690
版权归原作者 一只爱web的羊驼 所有， 如有侵权，请联系我们删除。
版权归原作者 一只爱web的羊驼 所有， 如有侵权，请联系我们删除。