js图片滑动展示
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>
