JavaScript实现轮播的方式多种多样,桌面的移动端的实现方式都是大同小异的,具体的核心实现原理不外乎下面几个要点。即:
1。确定播放方向,一般都是横向轮播,当然不排除纵向的需求可能。当然还有反向播放情况,这个自定义。
2. 对第一张图片的处理。如果当前是第一张了,那么如果继续往前面(就是你播放方向的反向)滑动,那么就会出现留白(如果你允许继续滑动的话,不过不允许滑动也没有啥意思了,除非你想来回轮播,这个我在另一篇用jQuery也说明过),此时应该让你的左边显示应该轮播图片的最后一张,实现无缝连接。
3.对最后一张图片的处理。跟第一张一样,你需要在继续滑动的时候显示第一张图片,实现无缝连接。
4. 对标记跟随原点的处理。这个需要对原点的排列方式和下标进行严谨的逻辑判断。
我这里是在移动端的一个轮播效果,纯JavaScript原生实现,应该说很接近工作实际了。请诸位爷上眼。
注意:如果您想实现跟我一样的效果,请务必按我的样式和架构来写
HTML部分
& lt; div id=昂凶印北?
& lt; ul id=發ilist”比;
& lt; li> & lt; img src=" https://www.yisu.com/zixun/5.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/1.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/2.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/3.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/4.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/5.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/1.jpg " alt="祝辞& lt;/li>
& lt;/ul>
& lt; ul id=拔锲贰北?
& lt;李类="活跃"祝辞& lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt;/ul>
& lt;/div>
CSS部分
*{保证金:0;填充:0;}
html,身体{高度:100%;}
#箱{
宽度:100%;
溢出:隐藏;
位置:相对;
}
#箱# lilist {/*宽度根据子元素个数动态确定*//*宽度:500%;*/位置:相对;
浮:左;
空白:nowrap;}
list-style:没有;
溢出:隐藏;
}
李#箱# lilist {
浮:左;
身高:200 px;
}
李#箱# lilist img {
显示:块;
宽度:100%;
高度:100%;
object-fit:填补;
}
#箱#{项目
位置:绝对的;
list-style:没有;
宽度:30%;
底部:10 px;
左:35%;
显示:flex;
flex-flow:行nowrap;}
justify-content:之间的空间;
}
李#箱#项{
浮:左;
宽度:10 px;
高度:10 px;
这个特性:50%;
背景颜色:黑色;
}
#箱#物品.active {
背景颜色:红色;
}
重点来啦,JavaScript原生代码:
窗口。onload=function () {
var totalli1=document.querySelectorAll (“# box> # lilist>李”);
var totalli2=document.querySelectorAll (“# box> # items>李”);//动态改变轮播图宽度
changewidth ();
函数changewidth () {
纽斯特尔var=document.createElement(“风格”);
var mycss=" # lilist{宽度:" + totalli1。长度+“00%}”;
李mycss +=" # lilist{宽度:" + (100/totalli1.length) +“%}”
纽斯特尔。innerHTML=mycss;
document.head.appendChild(纽斯特尔);
}
var getbox=. getelementbyid(“盒”);
var getlist=. 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,指数=0;//先让他左滑
变换(getlist“translateX -windowx);
getbox.addEventListener (“touchstart函数(事件){
让触摸=event.changedTouches [0];
startx=touch.clientX;//首位位置判断,并重新定位。鼠标刚放上去就要改变位置,不然移动移动再改的话会和移动的变换冲突,也不能在鼠标离开时切换,会影响到移动的滑动效果。这个过程中是瞬间完成的,不允许过渡或动画,显得平滑。
让lastx=Math.round(转换(getlist translateX)/windowx);
如果(lastx<1) {
lastx=totalli1.length-2;
}else if (lastx> totalli1.length-2) {
lastx=1;
}//移动到指定位置
变换(getlist“translateX -lastx * windowx);//给listleft赋值
listleft=变换(getlist translateX);//清除过度缓冲
getlist.style。过渡=懊挥小?//清除计时器
window.clearInterval(计时器);
})
getbox.addEventListener (“touchmove函数(事件){
让触摸=event.changedTouches [0];
endx=touch.clientX;
disx=endx - startx;
finalx=disx + listleft;
变换(getlist“translateX finalx)
})
getbox.addEventListener (“touchend函数(事件){
让触摸=event.changedTouches [0];//滑动的屏宽个数。
让lastx=0;//ul距屏幕左侧的距离与屏宽的比例
lastx=Math.round(转换(getlist translateX)/windowx);
如果(lastx
