本文介绍了一种无缝滑屏轮播组件的实现方法，包括使用定位技术实现无缝滑屏、组件化自动轮播功能及用户可选无缝功能。同时，探讨了使用LESS进行REM适配的方法，确保设计图尺寸与不同设备屏幕尺寸之间的适配。
文章目录
一、无缝滑屏轮播组件（使用定位）
1、不是无缝的滑屏轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0" /> -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no,email=no"/>
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;}
html,body{
height: 100%;overflow: hidden;}
#wrap{
height: 100%;overflow: hidden;}
#wrap .carouse_wrap > .list{
list-style: none;overflow: hidden;position: absolute;}
#wrap .carouse_wrap > .list > li{
float: left;}
#wrap .carouse_wrap > .list > li > a,#wrap .carouse_wrap > .list > li > a > img{
display: block;}
#wrap .carouse_wrap > .list > li > a > img{
width: 100%;}
</style>
</head>
<body>
<div id="wrap"><!-- 用来布局的，包裹轮播图，设置轮播图在页面位置 -->
<div class="carouse_wrap"><!-- 轮播容器 -->
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
/* 全局禁用默认事件触发 */
document.addEventListener("touchstart",function(ev){
ev=event||ev;
ev.preventDefault();
});
/* 动态生成轮播图 */
let arr = ["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg","img/05.jpg"];//模拟从后台获取的轮播图列表
let carouse_wrap = document.querySelector(".carouse_wrap");//获取轮播容器
if(carouse_wrap){
//如果轮播存在
/* dom结点 */
let ul = document.createElement("ul"); //创建一个ul结点
let style = document.createElement("style");//创建一个style结点
let head = document.querySelector("head"); //获取head结点
ul.classList.add("list") //给创建的ul的class列表添加一个.list样式
for(let i = 0;i<arr.length;i++){
//遍历数组，有多少图片就添加多少轮播结构
ul.innerHTML+='<li><a href="javascript:;"><img src="'+arr[i]+'" ></a></li>'
}
carouse_wrap.appendChild(ul) //把ul添加到容器中
/* （重点）给style结点添加样式，首先
我们应该先确定单张图片的大小，这里我就直接用百分比让图片填满屏幕了
那么，我们应该让ul的宽度正好容纳这些轮播图片，比如5张图片就是500%
那么5张图片，每张就占ul的20%，5*20%=100%，正好填满ul
*/
style.innerHTML="#wrap .carouse_wrap > .list{width: "+arr.length*100+"%;}#wrap .carouse_wrap > .list > li{width: "+100/arr.length+"%;}"
head.appendChild(style)//将style结点添加到head中
/* 最后，因为每个li都设置的定位，容器就没有东西撑开造成高度塌陷，我们只需要让其等于图片高度即可 */
let img = document.querySelector("#wrap .carouse_wrap > .list > li:nth-of-type(1) > a > img");
let timer=setTimeout(function(){
/* 因为js代码执行很快，页面没渲染好就获取offsetHeight会获取不到，等100ms就可以了 */
carouse_wrap.style.height=img.offsetHeight+"px"
},100)
clearTimeout(timer)//清除
/* ==================创建轮播完================= */
/* ==================滑屏======================= */
let ElStartX = 0; //元素当前位置
let startX = 0; //记录手点击起始位置
let moveX = 0; //记录手指滑动距离
let endX = 0; //记录手指抬起时位置
let index = 0; //记录当前轮播的下标
/* 手指点击屏幕事件 获取手指和当前元素位置*/
carouse_wrap.addEventListener("touchstart",function(ev){
ev = event||ev;
startX = ev.changedTouches[0].clientX;//获取手指点击位置
ElStartX = ul.offsetLeft;//获取元素当前位置
})
/* 手指移动事件 让元素跟随手指移动*/
carouse_wrap.addEventListener("touchmove",function(ev){
ev = ev||event;
ul.style.transition="none"; //清除过渡，在手指抬起事件中绑定，这里要清掉，因为影响滑屏体验
let nowX = ev.changedTouches[0].clientX; //获取滑动时的位置
moveX = nowX - startX; //获取滑动距离
ul.style.left = ElStartX + moveX + "px"; //让ul跟随手指偏移
})
/* 手指抬起事件 判断移动距离，如果超过100px的距离，就让轮播跳转到下一张或上一张，第一张和最后一张怎么滑都会回到原来的位置*/
carouse_wrap.addEventListener("touchend",function(ev){
ev = ev||event;
if(moveX > 0 && moveX >= 100){
//>0表示向右滑动屏幕
index===0?index=0:index--; //如果index=0了就让index=4，否则就自减
}else if(moveX < 0 && moveX <= -100){
index===4?index=4:index++;
}
ul.style.transition="1s left";//设置动画，在手指抬起时才设置
ul.style.left = -index * img.offsetWidth+"px";//让ul偏移当前图片下标*单张轮播宽度的距离
/* 方式2
let index = ul.offsetLeft/img.offsetWidth;//获取实时的位置，用ul的当前偏移/轮播宽度，就会得到一个数
这个数如果你向右滑屏会得到一个正数，如果你刚好滑满一屏，就是1，否则是一个小数
if(moveX > 0){
index = Math.ceil(index);//返回大于或等于index的最小整数
}else if(moveX < 0){
index = Math.floor(index);//返回小于或等于index的最大整数
}
ul.style.left = index * img.offsetWidth+"px"
*/
})
}
}
</script>
</html>
2、组件化无缝滑屏轮播（用户可以通过指定参数来决定是否需要无缝功能）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0" /> -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no,email=no"/>
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;}
html,body{
height: 100%;overflow: hidden;}
#wrap{
height: 100%;overflow: hidden;}
#wrap .carouse_wrap > .list{
list-style: none;overflow: hidden;position: absolute;}
#wrap .carouse_wrap > .list > li{
float: left;}
#wrap .carouse_wrap > .list > li > a,#wrap .carouse_wrap > .list > li > a > img{
display: block;}
#wrap .carouse_wrap > .list > li > a > img{
width: 100%;}
</style>
</head>
<body>
<div id="wrap"><!-- 用来布局的，包裹轮播图，设置轮播图在页面位置 -->
<div class="carouse_wrap" ><!-- 轮播容器 -->
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
/* 全局禁用默认事件触发 */
document.addEventListener("touchstart",function(ev){
ev=event||ev;
ev.preventDefault();
});
/* 动态生成轮播图 */
let arr = ["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg","img/05.jpg"];//模拟从后台获取的轮播图列表
let carouse_wrap = document.querySelector(".carouse_wrap");//获取轮播容器
if(carouse_wrap){
//如果轮播存在
/* 无缝1、复制数组 并确定用户是否需要无缝功能*/
/*
看看<div class="carouse_wrap" needCarouse >，加没加needCarouse，如果加了，表示用户需要无缝功能，没加就是null表示不需要无缝
*/
let needCarouse = carouse_wrap.getAttribute("needCarouse");//判断用户是否需要无缝功能
if(needCarouse!=null){
/* 如果不是null，表示需要无缝功能 */
let arrLength = arr.length;//保存当前数组的长度，因为复制数组会让数组长度改变
arr = arr.concat(arr)//向arr数组后面添加数组arr，生成一个全新的数组，然后重新赋值给arr
}
/* dom结点 */
let ul = document.createElement("ul"); //创建一个ul结点
let style = document.createElement("style");//创建一个style结点
let head = document.querySelector("head"); //获取head结点
ul.classList.add("list") //给创建的ul的class列表添加一个.list样式
for(let i = 0;i<arr.length;i++){
//遍历数组，有多少图片就添加多少轮播结构
ul.innerHTML+='<li><a href="javascript:;"><img src="'+arr[i]+'" ></a></li>'
}
carouse_wrap.appendChild(ul) //把ul添加到容器中
/* （重点）给style结点添加样式，首先
我们应该先确定单张图片的大小，这里我就直接用百分比让图片填满屏幕了
那么，我们应该让ul的宽度正好容纳这些轮播图片，比如5张图片就是500%
那么5张图片，每张就占ul的20%，5*20%=100%，正好填满ul
*/
style.innerHTML="#wrap .carouse_wrap > .list{width: "+arr.length*100+"%;}#wrap .carouse_wrap > .list > li{width: "+100/arr.length+"%;}"
head.appendChild(style)//将style结点添加到head中
/* 最后，因为每个li都设置的定位，容器就没有东西撑开造成高度塌陷，我们只需要让其等于图片高度即可 */
let img = document.querySelector("#wrap .carouse_wrap > .list > li:nth-of-type(1) > a > img");
let timer=setTimeout(function(){
/* 因为js代码执行很快，页面没渲染好就获取offsetHeight会获取不到，等100ms就可以了 */
carouse_wrap.style.height=img.offsetHeight+"px"
},100)
clearTimeout(timer)//清除
/* ==================创建轮播完================= */
/* ==================滑屏======================= */
let ElStartX = 0; //元素当前位置
let startX = 0; //记录手点击起始位置
let moveX = 0; //记录手指滑动距离
let endX = 0; //记录手指抬起时位置
let index = 0; //记录当前轮播的下标
/* 手指点击屏幕事件 获取手指和当前元素位置*/
carouse_wrap.addEventListener("touchstart",function(ev){
ev = event||ev;
ElStartX = ul.offsetLeft;//获取元素当前位置
startX = ev.changedTouches[0].clientX;//获取手指点击位置
ul.style.transition="none"; //清除过渡，在手指抬起事件中绑定，这里要清掉，因为影响滑屏体验
/* ===========无缝滑屏2======== */
if(needCarouse!=null){
//如果不为null表示用户需要无缝轮播
if(index===0){
/* 如果是第一个数组第一张 */
moveX = 0; //重新定位需要清除刚刚算出来的滑动距离
index=arr.length/2 //如果当前是第一张轮播图让index瞬间变为第二个数组的第一张
ElStartX=-index * img.offsetWidth; //起始位置变为第二个数组第一张
ul.style.left = -index * img.offsetWidth+"px"; //ul偏移到第二个数组第一张
}else if(index===(arr.length-1)){
/* 如果是第二个数组最后一张 */
index=arr.length/2-1 //让index瞬间变为第一个数组最后一张
ElStartX=-index * img.offsetWidth; //起始位置变为第一个数组最后一张
ul.style.left = -index * img.offsetWidth+"px"; //偏移到第一个数组最后一张
}else{
/* 如果不是第一和最后一张，普通的获取值即可 */
ElStartX = ul.offsetLeft;//获取元素当前位置
}
}else{
/* 是null表示不需要 */
ElStartX = ul.offsetLeft;//获取元素当前位置
}
})
/* 手指移动事件 让元素跟随手指移动*/
carouse_wrap.addEventListener("touchmove",function(ev){
ev = ev||event;
let nowX = ev.changedTouches[0].clientX; //获取滑动时的位置
moveX = nowX - startX; //获取滑动距离
ul.style.left = ElStartX + moveX + "px"; //让ul跟随手指偏移
})
/* 手指抬起事件 判断移动距离，如果超过100px的距离，就让轮播跳转到下一张或上一张，第一张和最后一张怎么滑都会回到原来的位置*/
carouse_wrap.addEventListener("touchend",function(ev){
ev = ev||event;
/* 无缝滑屏3,改改逻辑 */
if(needCarouse!=null){
//如果不为null表示用户需要无缝轮播
if(moveX > 0 && moveX >= 100){
//>0表示向右滑动屏幕
index--;
}else if(moveX < 0 && moveX <= -100){
index++;
}
}else{
if(moveX > 0 && moveX >= 100){
//>0表示向右滑动屏幕
index===0?index=0:index--; //如果index=0了就让index=4，否则就自减
}else if(moveX < 0 && moveX <= -100){
index===4?index=4:index++;
}
}
ul.style.transition="0.5s left";//设置动画，在手指抬起时才设置
ul.style.left = -index * img.offsetWidth+"px";//让ul偏移当前图片下标*单张轮播宽度的距离
})
}
}
</script>
</html>
3、组件化自动轮播功能，用户可选功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0" /> -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no,email=no"/>
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;}
html,body{
height: 100%;overflow: hidden;}
#wrap{
height: 100%;overflow: hidden;}
#wrap .carouse_wrap > .list{
list-style: none;overflow: hidden;position: absolute;}
#wrap .carouse_wrap > .list > li{
float: left;}
#wrap .carouse_wrap > .list > li > a,#wrap .carouse_wrap > .list > li > a > img{
display: block;}
#wrap .carouse_wrap > .list > li > a > img{
width: 100%;}
</style>
</head>
<body>
<div id="wrap"><!-- 用来布局的，包裹轮播图，设置轮播图在页面位置 -->
<div class="carouse_wrap" needCarouse needAutoCarouse ><!-- 轮播容器 -->
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
/* 全局禁用默认事件触发 */
document.addEventListener("touchstart",function(ev){
ev=event||ev;
ev.preventDefault();
});
/* 动态生成轮播图 */
let arr = ["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg","img/05.jpg"];//模拟从后台获取的轮播图列表
let carouse_wrap = document.querySelector(".carouse_wrap");//获取轮播容器
if(carouse_wrap){
//如果轮播存在
/* 无缝1、复制数组 并确定用户是否需要无缝功能*/
/*
看看<div class="carouse_wrap" needCarouse >，加没加needCarouse，如果加了，表示用户需要无缝功能，没加就是null表示不需要无缝
*/
let needCarouse = carouse_wrap.getAttribute("needCarouse");//判断用户是否需要无缝功能
if(needCarouse!=null){
/* 如果不是null，表示需要无缝功能 */
let arrLength = arr.length;//保存当前数组的长度，因为复制数组会让数组长度改变
arr = arr.concat(arr)//向arr数组后面添加数组arr，生成一个全新的数组，然后重新赋值给arr
}
/* &&&&&&&&&&&&&自动轮播1、&&&&&&&&&&&&&&&& */
let needAutoCarouse = carouse_wrap.getAttribute("needAutoCarouse");/* 如果有此参数，表示用户开启自动轮播 */
if(needAutoCarouse!=null){
let AutoTimer = 0;//用来保存自动轮播时间函数id
AutoCarouse(); //自动轮播函数
}
/* dom结点 */
let ul = document.createElement("ul"); //创建一个ul结点
let style = document.createElement("style");//创建一个style结点
let head = document.querySelector("head"); //获取head结点
ul.classList.add("list") //给创建的ul的class列表添加一个.list样式
for(let i = 0;i<arr.length;i++){
//遍历数组，有多少图片就添加多少轮播结构
ul.innerHTML+='<li><a href="javascript:;"><img src="'+arr[i]+'" ></a></li>'
}
carouse_wrap.appendChild(ul) //把ul添加到容器中
/* （重点）给style结点添加样式，首先
我们应该先确定单张图片的大小，这里我就直接用百分比让图片填满屏幕了
那么，我们应该让ul的宽度正好容纳这些轮播图片，比如5张图片就是500%
那么5张图片，每张就占ul的20%，5*20%=100%，正好填满ul
*/
style.innerHTML="#wrap .carouse_wrap > .list{width: "+arr.length*100+"%;}#wrap .carouse_wrap > .list > li{width: "+100/arr.length+"%;}"
head.appendChild(style)//将style结点添加到head中
/* 最后，因为每个li都设置的定位，容器就没有东西撑开造成高度塌陷，我们只需要让其等于图片高度即可 */
let img = document.querySelector("#wrap .carouse_wrap > .list > li:nth-of-type(1) > a > img");
let timer=setTimeout(function
最低0.47元/天 解锁文章
扫一扫
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
