- A+
所属分类：Web前端
gitee地址
https://gitee.com/ElevenHuntOne/js-image-slide
html
<!-- html里只用写一个div就行了，带上id为imgs --> <div id = "imgs"></div> css
/* 样式 */ #imgs { margin-left: 10%; width: 80%; height: 240px; margin-top: 80px; background-color: azure; position: relative; overflow: hidden; } #imgs ul { position: absolute; padding: 0; } #imgs ul li { float: left; list-style: none; width: 260px; height: 200px; } #imgs ul li img{ width: 240px; height: 200px; } js
// 滑动方法 function scroll(to, time) { $("#imgs").find("ul").stop().animate({left: to + "px"}, time) } // 初始化方法 $(function() { // 图片列表 const imgList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'] // 滑动速度 const speed = 800 // 获取div然后循环往里边插入ul、li、img let div = document.getElementById("imgs") let ul = document.createElement("ul") ul.style.left = div.offsetWidth + "px" ul.style.width = 260 * imgList.length + "px" div.appendChild(ul) let toLeft = div.offsetWidth - 260 * imgList.length for(i in imgList) { imgPath = imgList[i] let li = document.createElement("li") let img = document.createElement("img") img.src = imgPath li.appendChild(img) ul.appendChild(li) } let time = speed * imgList.length let time1 = parseInt( (20 - toLeft) / 260 * speed) scroll(toLeft, time) // 通过计时器控制循环左右滑动 setTimeout("scroll(20, " + time1 + ")", time) setTimeout("scroll(" + toLeft + ", " + time1 + ")", time + time1) setTimeout("setInterval('scroll(" + 20 + ", " + time1 + ");', "+ time1 * 2 +")", time) setTimeout("setInterval('scroll(" + toLeft + ", " + time1 + ");', "+ time1 * 2 +")", time + time1) }); 完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script> <style> /* 样式 */ #imgs { margin-left: 10%; width: 80%; height: 240px; margin-top: 80px; background-color: azure; position: relative; overflow: hidden; } #imgs ul { position: absolute; padding: 0; } #imgs ul li { float: left; list-style: none; width: 260px; height: 200px; } #imgs ul li img{ width: 240px; height: 200px; } </style> </head> <body> <!-- html里只用写一个div就行了，带上id为imgs --> <div id = "imgs"></div> </body> <script> // 滑动方法 function scroll(to, time) { $("#imgs").find("ul").stop().animate({left: to + "px"}, time) } // 初始化方法 $(function() { // 图片列表 const imgList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'] // 滑动速度 const speed = 800 // 获取div然后循环往里边插入ul、li、img let div = document.getElementById("imgs") let ul = document.createElement("ul") ul.style.left = div.offsetWidth + "px" ul.style.width = 260 * imgList.length + "px" div.appendChild(ul) let toLeft = div.offsetWidth - 260 * imgList.length for(i in imgList) { imgPath = imgList[i] let li = document.createElement("li") let img = document.createElement("img") img.src = imgPath li.appendChild(img) ul.appendChild(li) } let time = speed * imgList.length let time1 = parseInt( (20 - toLeft) / 260 * speed) scroll(toLeft, time) // 通过计时器控制循环左右滑动 setTimeout("scroll(20, " + time1 + ")", time) setTimeout("scroll(" + toLeft + ", " + time1 + ")", time + time1) setTimeout("setInterval('scroll(" + 20 + ", " + time1 + ");', "+ time1 * 2 +")", time) setTimeout("setInterval('scroll(" + toLeft + ", " + time1 + ");', "+ time1 * 2 +")", time + time1) }); </script> </html> 
