/*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*/ 
 
 
 
 
 
 
 
 
 
 
 /*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/...