轮播图简单实现

Y.03

已于 2023-08-26 13:34:53 修改

阅读量206

点赞数

文章标签： python

于 2023-08-26 13:33:12 首次发布

本文链接：https://blog.csdn.net/2202_76088586/article/details/132510644

版权

轮播图大家肯定都不陌生，因为这是前端最为常见的一个功能，现在随着框架和一些插件的兴起，很少人会去原生的去写轮播图，所以今天带大家写一下原生的轮播图来熟悉一下

最为主要的就是得知道这张图片的宽度，因为每一次移动的距离就是这张图片的宽度，但是宽度我们不能给死，每一张图片的大小是不一样的，所以根据js的clientWidth来获取，这样不管图片是多大都能获得这张图片的大小，第一步的移动距离就完成了，核心部分也就完成了

然后就是选择的定时器，这里一定要用setInterval这个定时器，不能用setTimeout，主要原因就不细说了，大家应该是都很熟悉的。

最后就是轮播到最后一张图片的时候该如何回到第一张图片呢？这里是直接不带动画的跳转到第一张(一会在代码中体现出来)

下面就来看一下代码的实现过程：

首先是html结构文件，这个轮播图结构上不难:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</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;
}