javascript - js控制元素样式的疑惑

问题描述

/*css*/ul,li{margin: 0;padding: 0; } .slider{width: 100%;height: 300px;overflow: hidden; } .slider_box{width: 500%;height:100%;transition: all 0.3s; } .slider_box>ul{width: 100%;height:100%;white-space: nowrap; } .slider_box>ul>li{display: inline-block;width: 20%;height: 100%; } .slider_box>ul>li:nth-of-type(0){background: #000088; } .slider_box>ul>li:nth-of-type(1){background: #004444; } .slider_box>ul>li:nth-of-type(2){background: #221199; } .slider_box>ul>li:nth-of-type(3){background: #AA1111; } .slider_box>ul>li:nth-of-type(4){background: #E38D13; }/*html*/<p class='slider'> <p class='slider_box'><ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul> </p></p>/*js*/var list = document.getElementsByClassName('slider_box')[0]; var arr = list.children; var test = 0; function slide(){if(test<5){list.style.transform = 'translateX(-'+test*20+'%)';test++;setTimeout('slide()',1000);} } slide();

如上代码,每间隔一秒,slider_box向左滑动20%(1屏),可是问题来了,当滑到100%后,不能再向左滑动了(再滑动就没有图片了),而我在其他一些插件上看的效果却是每间隔一秒,slider_box的滑动变化为-20%至0再到-20%.这样处理就不会存在当slider_box滑动到100%时再滑动就跑出区域的问题了,那么问题是这些插件它是如何处理使slider_box由-20%变为0再变为-20%的呢?如上代码我尝试了先清除上一次的滑动样式,再设置本次滑动样式:

function slide(){list.style.transform = 'translateX(-20%)';if(test<5){// list.style.transform = 'translateX(-'+test*20+'%)'; list.style.transform = 'translateX(0)'; test++; setTimeout('slide()',1000);} } slide();

却实现不了其中的变化,而且也不滑动了,那么要达到如插件上的效果,我这里应该如何处理.是不是压根人家就不是按照这种思路来的?插件中的js方法封装得太深奥,恕我实在不知所云.另:插件链接:http://sc.chinaz.com/jiaoben/...

问题解答

动一下就把第一个li apend到最后

你原来的方式没问题的，只是你判断了 test<5 但却一直把 test 加。所以把 test++ 改成 test = (test + 1) % 5 应该就行。

你是想实现无缝轮播吧。一般来说 2种思路 1.控制父容器的属性 2.控制子元素的属性 比如left，transformX margin 。先要实现无缝 也有2种思路 1.前后各多一张图片，初始化显示第2张图片2.不多图片，初始化显示第二张图片，不过呢 用户看到的永远都是第二个位置。可以看我去年写的一个简单的无缝轮播 简易无缝轮播

那个就是无缝轮播。

<p style='left: -600px;'><img src='https://www.haobala.com/wenda/image/5.jpg' alt='1'/><img src='https://www.haobala.com/wenda/image/1.jpg' alt='1'/><img src='https://www.haobala.com/wenda/image/2.jpg' alt='2'/><img src='https://www.haobala.com/wenda/image/3.jpg' alt='3'/><img src='https://www.haobala.com/wenda/image/4.jpg' alt='4'/><img src='https://www.haobala.com/wenda/image/5.jpg' alt='5'/><img src='https://www.haobala.com/wenda/image/1.jpg' alt='5'/> </p>

就像这样，在头尾各添加一个副本，再加上轮播到真正的头尾（即是我代码的第二个img和第六个img），你加上if判断，判断你的list.style就OK了