JavaScript实现移动端带transition动画的轮播效果
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了JavaScript原生实现带transition动画的自动+手动轮播效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
JavaScript实现轮播的方式多种多样，桌面的移动端的实现方式都是大同小异的，具体的核心实现原理不外乎狼蚁网站SEO优化几个要点。即：
1. 确定播放方向。一般都是横向轮播，当然不排除纵向的需求可能。当然还有反向播放情况，这个自定义。
2. 对第一张图片的处理。如果当前是第一张了，那么如果继续往前面(就是你播放方向的反向)滑动，那么就会出现留白（如果你允许继续滑动的话，不过不允许滑动也没有啥意思了，除非你想来回轮播，这个我在另一篇用jQuery也说明过），此时应该让你的左边显示应该轮播图片的最后一张，实现无缝连接。
3. 对最后一张图片的处理。跟第一张一样，你需要在继续滑动的时候显示第一张图片，实现无缝连接。
4. 对标记跟随原点的处理。这个需要对原点的排列方式和下标进行严谨的逻辑判断。
我这里是在移动端的一个轮播效果，纯JavaScript原生实现，应该说很接近工作实际了。请诸位爷上眼。
注意：如果您想实现跟我一样的效果，请务必按我的样式和架构来写
HTML部分
<div id="box"> <ul id="lilist"> <li><img src="5.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> <li><img src="4.jpg" alt=""></li> <li><img src="5.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> </ul> <ul id="items"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
CSS部分
*{ margin: 0;padding: 0; }
html,body{ height: 100%;}
#box{
width: 100%;
overflow: hidden;
position: relative;
}
#box #lilist{
/* 宽度根据子元素个数动态确定 */
/*width: 500%;*/
position: relative;
float: left;
white-space: nowrap;
list-style: none;
overflow: hidden;
}
#box #lilist li{
float: left;
height: 200px;
}
#box #lilist li img{
display: block;
width: 100%;
height: 100%;
object-fit: fill;
}
#box #items{
position: absolute;
list-style: none;
width: 30%;
bottom: 10px;
left: 35%;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
#box #items li{
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
}
#box #items .active{
background-color: red;
}
重点来啦，JavaScript原生代码：
window.onload = function(){
var totalli1 = document.querySelectorAll("#box>#lilist>li");
var totalli2 = document.querySelectorAll("#box>#items>li");
// 动态改变轮播图宽度
changewidth();
function changewidth(){
var newstyle = document.createElement("style");
var mycss = "#lilist{ width : "+totalli1.length+"00% }";
mycss += "#lilist li{ width : "+(100/totalli1.length)+"% }"
newstyle.innerHTML = mycss;
document.head.appendChild(newstyle);
}
var getbox = document.getElementById("box");
var getlist = document.getElementById("lilist");
var startx = 0, endx = 0, disx = 0;
var listleft = 0, finalx = 0;
var windowx = document.documentElement.offsetWidth;
var listx = getlist.offsetWidth;
var moveindex = 0;
// 自动轮播控制变量
var num = 1, index = 0;
// 先让他左滑
transforms(getlist,"translateX",-windowx);
getbox.addEventListener("touchstart",function(event){
let touch = event.changedTouches[0];
startx = touch.clientX;
// 首位位置判断，并重新定位.鼠标刚放上去就要改变位置，不然move移动再改的话会和移动的transform冲突，也不能在鼠标离开时切换，会影响到移动的滑动效果。这个过程中是瞬间完成的，不允许过渡或动画，显得平滑。
let lastx = Math.round(-transforms(getlist,"translateX")/windowx);
if(lastx<1){
lastx = totalli1.length-2;
}else if(lastx>totalli1.length-2){
lastx = 1;
}
// 移动到指定位置
transforms(getlist,"translateX",-lastx*windowx);
// 给 listleft 赋值
listleft = transforms(getlist,"translateX");
// 清除过度缓冲
getlist.style.transition = "none";
// 清除计时器
window.clearInterval(timer);
})
getbox.addEventListener("touchmove",function(event){
let touch = event.changedTouches[0];
endx = touch.clientX;
disx = endx - startx;
finalx = disx+listleft;
transforms(getlist,"translateX",finalx)
})
getbox.addEventListener("touchend",function(event){
let touch = event.changedTouches[0];
// 滑动的屏宽个数。
let lastx = 0;
// ul 距屏幕左侧的距离与屏宽的比例
lastx = Math.round(-transforms(getlist,"translateX")/windowx);
if(lastx<=0){
lastx = 0;
}else if(lastx>totalli1.length-1){
lastx = totalli1.length-1;
}
transforms(getlist,"translateX",-lastx*windowx);
getlist.style.transition = "transform 0.3s";
// 下部红点跟随,获取下标。诸位请注意狼蚁网站SEO优化几个数字的含义，4,5,6的意思你们自己思考一下
moveindex = lastx-1;
if(lastx==1||lastx==6){
moveindex = 0;
}else if(lastx==0||lastx==5){
moveindex = 4;
}
movecircle(moveindex);
// 重新添加计时器，自动轮播
timer = window.setInterval(playself,3000);
// 改变num和index的值,以确定计时器开始位置
console.log(moveindex+"。。。"+lastx)
index = moveindex;
num = lastx;
})
// 自动轮播
var timer = window.setInterval(playself,3000);
function playself(){
// 清除过渡残留
getlist.style.transition = "none";
if(num==totalli1.length-1){
transforms(getlist,"translateX",-windowx);
num = 1;
}
// 再添加一个一次性计时器即可分开与 interval 的冲突
setTimeout(function(){
transforms(getlist,"translateX",-windowx*(++num));
getlist.style.transition = "transform 0.5s";
// 原点跟随移动
index++;
if(index==totalli2.length){
index = 0;
totalli2[index].classList.add("active");
}
movecircle(index);
},1)
}
// 红点移动函数
function movecircle(getindex){
for(let i=0;i<totalli2.length;i++){
totalli2[i].classList.remove("active");
if(getindex==i){
totalli2[getindex].classList.add("active");
}
}
}
}
代码还有一些算法部分的瑕疵，本人愚钝，目前只能想到这种方式了，有些变量可能会占用太多内存，希望各位仅作参考，如有大神指出问题所在，万分感谢。最后，诚心感谢有缘人的观看！祝你生活愉快，工作顺利！
总结
到此这篇关于JavaScript实现移动端带transition动画的轮播效果的文章就介绍到这了,更多相关js transition 轮播内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！
上一篇：js实现消灭星星(web简易版)
下一篇：javascript实现滚动条效果