使用JS实现无限轮播无倒退效果

　　介绍

今天就跟大家聊聊有关使用JS实现无限轮播无倒退效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强>原理:每次移动前设置过渡过渡效果,完成清除过渡效果,然后在到达最后一张图片的时候在清除过渡效果之后translateX (0)

另外需要金桥的引用HTML:

& lt; div类=皊lide-container"view-count=?“在 　　& lt; ul> 　　& lt; li> 　　& lt; img src=https://www.yisu.com/zixun/巴枷?女/15444293310974910. jpg”alt="/> 　　李 　　<李> 　　 　　李 　　<李> 　　。slide-container%20{ 　　max-width:%201230%20px; 　　保证金:汽车; 　　溢出:隐藏; 　　} 　　李.slide-container%20{ 　　浮:左; 　　} 　　.slide-container%20img%20{ 　　宽度:100%; 　　}%20

%20JS:%20

%20

第一步我们应该在ul的所有李前面和后面复制一份一摸一样的李数组。

%20

效果图:

%20

%20

使用JS实现无限轮播无倒退效果

在原来的李集合前后添加了一个一模一样的集合之后,slide-container显示的是预谋李集(合)。

为了使slide-container显示的是最中间的李集合,设置ul: margin-left和margin-right为负值。大小为一个李集合的宽度。

这样ul实际的宽度就是原来的三倍.slide-container显示的就是最原始的李集合。

让orgLen canMove、curLi curLen,
　　滑块=零,
　　间隔=零,
　　curImgIndex=0;
　　
　　函数initSlider () {
　　让orgLiArray=document.querySelectorAll (& # 39;。slide-container李# 39;);
　　
　　orgLen=orgLiArray.length;
　　canMove=true;
　　滑块=$ (& # 39;.slide-container& # 39;);
　　
　　addLi ();
　　setStyle ();//添加
　　函数addLi () {
　　(让我=0;我& lt;orgLen;我+ +){
　　让preLi=orgLiArray [orgLen -我- 1].cloneNode(真正的);
　　让apLi=orgLiArray[我].cloneNode(真正的);
　　document.querySelector (& # 39;。slide-container ul # 39;) .prepend (preLi);
　　document.querySelector (& # 39;。slide-container ul # 39;) .append (apLi);
　　}
　　}
　　
　　函数setStyle () {
　　curLi=slider.find(& # 39;李# 39;);
　　curLen=curLi.length;
　　
　　curLi.css ({
　　& # 39;宽度# 39;:& # 39;钙(& # 39;+ 100/curLen + & # 39; % - 10 px) & # 39;//动态设置李的宽度
　　& # 39;边缘# 39;:& # 39;0 5 px # 39;
　　});//根据实际李个数与ul中用户能够看到的个数比例设置ul宽度
　　slider.find (& # 39; ul # 39;) . css ({
　　& # 39;宽度# 39;:curLen/slider.attr (& # 39; view-count& # 39;) * 100 + & # 39; % & # 39;
　　});//获取到设置了宽度之后的李宽度//通过margin-left与margin-right为负数使中间的原始李集合在slide-container显示
　　让宽度=document.defaultView.getComputedStyle (curLi [0]) .width.match (/* \ W \ \ d d/g);
　　
　　宽度=(parseFloat(宽度)+ 10)* orgLen;
　　slider.find (& # 39; ul # 39;) . css ({
　　& # 39;margin-left& # 39;: & # 39; & # 39;+ + & # 39;宽度,px # 39;
　　& # 39;margin-right& # 39;: & # 39; & # 39;+ + & # 39;宽度,px # 39;
　　});
　　}
　　}/* *
　　*移动函数
　　*每次移动后移除过渡效果
　　*当前第一个图片索引值的绝对值大于原始图片数量则恢复为原始状态
　　* @param imgIndex
　　*/函数移动(imgIndex) {
　　canMove=false;//滚轮滚动中不能再次滚动
　　clearInterval(间隔);//清除定时器
　　slider.find (& # 39; ul # 39;) . css ({
　　& # 39;过渡# 39;:& # 39;所有0.5 s线性# 39;
　　});
　　
　　setTimeout(函数(){//移动
　　slider.find (& # 39; ul # 39;) . css ({
　　& # 39;变换# 39;:& # 39;translateX (& # 39;+ 100/curLen * -imgIndex + & # 39; %) & # 39;
　　});
　　setTimeout(函数(){//移动完成后清除过渡效果
　　slider.find (& # 39; ul # 39;) . css ({
　　& # 39;过渡# 39;:& # 39;& # 39;
　　});
　　setTimeout(函数(){
　　如果(Math.abs (imgIndex)祝辞=orgLen){//到达边界回到初始状态
　　curImgIndex=0;
　　slider.find (& # 39; ul # 39;) . css ({
　　& # 39;变换# 39;:& # 39;translateX (0) & # 39;
　　});
　　}
　　canMove=true;
　　startInterval ();
　　},20);
　　},500);
　　},20);
　　}
　　
　　函数startInterval () {
　　间隔=setInterval(函数(){//开始轮播
　　curImgIndex + +;
　　移动(curImgIndex);
　　},2000);
　　}
　　
　　initSlider ();
　　startInterval (); 
使用JS实现无限轮播无倒退效果