使用js和css-transition属性57行代码实现简易无缝轮播图
Posted Kali
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用js和css-transition属性57行代码实现简易无缝轮播图相关的知识，希望对你有一定的参考价值。
代码如下：
<!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>
<style>
div img {
position: absolute;
width: 100%;
height: 200px;
transition: all;
transition-duration: 0.5s;
}
.carousel {
position: relative;
}
</style>
</head>
<body>
<div class="carousel">
<img src="./imgs/1.jpeg" id="1">
<img src="./imgs/2.jpeg" id="2">
<img src="./imgs/3.jpeg" id="3">
</div>
<script>
window.onload = function () {
let img1 = document.getElementById("1")
let img2 = document.getElementById("2")
let img3 = document.getElementById("3")
let img_box = document.getElementsByTagName("div","tag")[0]
console.log(img_box)
let img_list = [img1,img2,img3]
img_list[0].style.left = "340px"
img_list[1].style.left = "-200px"
img_list[2].style.left = "0px"
setInterval(() => {
img_list[0].style.left = "680px"
img_list[2].style.left = "340px"
img_list[1].style.left = "0px"
img_list[0].style.display = "none"
img_list[0].style.left = "-340px"
setTimeout(()=>{
img_list[0].style.display = ""
img_list.unshift(img_list.pop())
},450)
}, 3000)
}
</script>
</body>
</html>核心是维护一个队列和绝对定位的特性。通过调整left的宽度实现轮播。本轮播图没有对响应性进行适配，最佳宽度是356px。
以上是关于使用js和css-transition属性57行代码实现简易无缝轮播图的主要内容，如果未能解决你的问题，请参考以下文章
VS2022如何设置代码智能提示，写完一行，能猜到下行然后提示出来，一个Tab就把提示的这行代写全？
使用两个输入字段创建具有计算机属性（getter 和 setter）的 Date 对象 Ember JS
删除 Vue JS 中的元素时在 dev 中工作但在 prod 中不工作时的动画