原生js
利用滚动条来写的图片滑动
html
<div id="bigBox">
<div id="smBox"></div>
</div>
js
//需要渲染的图片最后写一些重复的
let imgList=[
"./image/list1.png",
"./image/list2.png",
"./image/list3.png",
"./image/list4.png",
"./image/list5.png",
"./image/list6.png",
"./image/list7.png",
"./image/list8.png",
"./image/list1.png",
"./image/list2.png",
"./image/list3.png",
"./image/list4.png",
"./image/list5.png",
]
let imgBox = document.querySelector("#smBox");
let BigImgBox = document.querySelector("#bigBox");
//进行图片渲染
let imgBoxStr = "";
imgList.forEach(e => {
imgBoxStr+= `<img src="${e}" alt="">`
});
imgBox.innerHTML=imgBoxStr;
//获取渲染的图片及图片宽度
setTimeout(function(){
let widthStr = ""
let imgArr = document.querySelectorAll("#LogosBox img")
for(let i=0;i<imgArr.length;i++){
widthStr = widthStr*1+imgArr[i].offsetWidth*1
}
imgBox.style.width=widthStr+200+"px"
let jianWidth = 0;
for(let i=0;i<5;i++){
jianWidth=jianWidth*1+imgArr[i].offsetWidth*1
}
marginLeftFn(jianWidth)
},10)
//滑动处理
let num = 0;
function marginLeftFn(jianWidth){
let shengWidth = imgBox.offsetWidth - jianWidth;
let time = null
time = setInterval(function(){
num++;
BigImgBox.scrollTo(num,0)
if(num>=shengWidth){
num=0
}
},1)
//手指按住
BigImgBox.ontouchstart = function(){
clearInterval(time)
}
//滑动后手指离开
BigImgBox.ontouchend = function(){
num = BigImgBox.scrollLeft;
clearInterval(time)
time = setInterval(function(){
num++;
BigImgBox.scrollTo(num,0)
if(num>=shengWidth){
num=0
}
},1)
}
}