移动端图片循环滚动条可以拖拽

该文章展示了如何利用JavaScript进行图片渲染和滚动条控制,通过在div元素中创建图片列表,然后监听触摸事件来实现手动滑动时的图片滚动效果。代码包括图片的重复添加、宽度计算、滚动处理函数以及触摸开始和结束时的事件处理。
摘要由CSDN通过智能技术生成

原生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)
			}
		}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值