JQuery实现移动端广告横向自动滚动效果

最新推荐文章于 2022-04-19 19:51:34 发布

cqy5071021

最新推荐文章于 2022-04-19 19:51:34 发布

阅读量1k

点赞数

文章标签： html js css jquery

本文链接：https://blog.csdn.net/cqy5071021/article/details/108224522

版权

JQuery实现移动端广告横向自动滚动效果(触摸可左右滑动)

前段时间万恶产品要求实现几张图片横向滚动播放,用户触摸可自由左右滑动,网上找了很久也没有找到,最后自己磕磕碰碰实现了效果,虽然有些情况下有BUG,但是应该还是可以满足部分需求了,希望有大佬愿意修改一下部分情况下的BUG(比如当第一个li滚到一般的时候,最后一个已经完全展示,这时候继续滚动,后面就会出现部分时间空白,等第一个li滚动到消失,才会截取到后面填上)


	<!DOCTYPE html>
	<html lang="en">

		<head>
	    	<meta charset="UTF-8">
		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		    <meta http-equiv="X-UA-Compatible" content="ie=edge">
		    <script></script>//记得引入JQ文件
		    <title>Document</title>
		    <style>
		        ul {
		            list-style: none;
		            white-space: nowrap;
		            position: relative;
		            left: 0px;
		            font-size: 0px;
		            padding: 0px
		        }
		
		        li {
		            margin-left: 5px;
		        }
		
		        .liWidth {
		            width: 10rem;
		            height: 100px;
		            background: red;
		            display: inline-block;
		        }
		
		        .li2 {
		            background: #000;
		        }
		
		        .li3 {
		            background: green;
		        }
		    </style>
		</head>
	
		<body>
		    <div style="position:relative;margin: 40px auto 0;overflow: hidden;">
		        <ul class="milestoneUl">
		            <li class="liWidth p1 li1">
		
		            </li>
		            <li class="liWidth li2">
		
		            </li>
		            <li class="liWidth p3 li3">
		
		            </li>
		        </ul>
		    </div>
		    <script>
		        var liArr = $('.liWidth')
		        var ulWidth = $('.milestoneUl').width()
		        var leftValue = 0
		        var p = 0, //用于判断用户是左滑还是右滑
		            t = 0;
		        //定时器,设置每100毫秒移动移动距离
		        let aboutTime = setInterval(function () {
		            slideLR()
		            leftValue = leftValue - 2
		        }, 100)
		        $('.milestoneUl').on('touchstart', function (e) {
		            t = e.originalEvent.touches[0].pageX //用户触摸屏幕时候的X轴位置
		            clearInterval(aboutTime); //用户触摸屏幕是暂停定时器
		        })
		        $('.milestoneUl').on('touchmove', function (e) {
		            p = e.originalEvent.touches[0].pageX; //用户滑动到的位置的X轴位置
		            if (t < p) { //手动右滑
		                if (leftValue >= 10 && leftValue <=20) { //这里的两个数字因为设置的手动滑每次为4像素,所以设置了区间,防止用户滑动直接跳过某个数字(其实当用户滑动到leftValue=0的时候,就应该吧最右边的li放到最左边,但是如果设置0-10的话,会有一点跳跃感,所以我设置了10-20)
		                    leftValue = -$('.liWidth').width() //使用$('.liWidth').width()获取单个li宽度
		                    $(".p1").before($(".p3"));
		                    $(".liWidth:first-child").addClass("p1").siblings().removeClass("p1")
		                    $(".liWidth:last-child").removeClass("p1").addClass("p3").siblings().removeClass("p3")
		                }
		                $('.milestoneUl').css('left', leftValue)
		                leftValue = leftValue + 4
		            } else { //手动左滑,实现很简单,就是在自动滑动的基础上增加点滑动宽度,让客户能感受到在滑动
		                slideLR()
		                leftValue = leftValue - 4
		            }
		            setTimeout(function () {
		                t = p;
		            }, 0);
		        })
		        //当用户手指离开屏幕时候,重新开启定时器
		        $('.milestoneUl').on('touchend', function (e) {
		            aboutTime = setInterval(function () {
		                slideLR()
		                leftValue = leftValue - 2
		            }, 100);
		        })
		        //自动滚动函数
		        function slideLR() {
		            if ((Math.abs(leftValue) + ($('.liWidth').width()) * 2) >= ($('.liWidth').width()) * liArr.length+3) { //数字2代表li总数-1(比如有10个li,那么这里就是9),通过动态改变定位距离leftValue加上($('.liWidth').width()) * 2)和总长度比较,大于等于的时候,就把第一个格子移动到最后一个格子后面,这里加3是因为不加3自动滚动的时候会有一个明显的小跳跃感觉,个人猜测应该是和li之间的margin距离有关
		                leftValue = 0
		                $(".p3").after($(".p1")); //把第一个格子移动到最后一个格子后面
		                $(".liWidth:first-child").addClass("p1") //保证只有首个li有p1这个类名(类名可自己取)
		                $(".liWidth:last-child").removeClass("p1").addClass("p3").siblings().removeClass(
		                    "p3") //保证只有最后一个li有p3这个类名(类名可自己取)
		            }
		            $('.milestoneUl').css('left', leftValue) //
		        }
		    </script>
		</body>
	
	</html>