html div无缝轮播代码,使用js和css-transition属性57行代码实现简易无缝轮播图

代码如下：

Document

div img {

position: absolute;

width: 100%;

height: 200px;

transition: all;

transition-duration: 0.5s;

}

.carousel {

position: relative;

}

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)

}

核心是维护一个队列和绝对定位的特性。通过调整left的宽度实现轮播。本轮播图没有对响应性进行适配，最佳宽度是356px。