問(wèn)題描述

/*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向左滑動(dòng)20%(1屏),可是問(wèn)題來(lái)了,當(dāng)滑到100%后,不能再向左滑動(dòng)了(再滑動(dòng)就沒(méi)有圖片了),而我在其他一些插件上看的效果卻是每間隔一秒,slider_box的滑動(dòng)變化為-20%至0再到-20%.這樣處理就不會(huì)存在當(dāng)slider_box滑動(dòng)到100%時(shí)再滑動(dòng)就跑出區(qū)域的問(wèn)題了,那么問(wèn)題是這些插件它是如何處理使slider_box由-20%變?yōu)?再變?yōu)?20%的呢?如上代碼我嘗試了先清除上一次的滑動(dòng)樣式,再設(shè)置本次滑動(dòng)樣式:

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();

卻實(shí)現(xiàn)不了其中的變化,而且也不滑動(dòng)了,那么要達(dá)到如插件上的效果,我這里應(yīng)該如何處理.是不是壓根人家就不是按照這種思路來(lái)的?插件中的js方法封裝得太深?yuàn)W,恕我實(shí)在不知所云.另:插件鏈接:http://sc.chinaz.com/jiaoben/...

問(wèn)題解答

動(dòng)一下就把第一個(gè)li apend到最后

你原來(lái)的方式?jīng)]問(wèn)題的，只是你判斷了 test<5 但卻一直把 test 加。所以把 test++ 改成 test = (test + 1) % 5 應(yīng)該就行。

你是想實(shí)現(xiàn)無(wú)縫輪播吧。一般來(lái)說(shuō) 2種思路 1.控制父容器的屬性 2.控制子元素的屬性 比如left，transformX margin 。先要實(shí)現(xiàn)無(wú)縫 也有2種思路 1.前后各多一張圖片，初始化顯示第2張圖片2.不多圖片，初始化顯示第二張圖片，不過(guò)呢 用戶看到的永遠(yuǎn)都是第二個(gè)位置。可以看我去年寫(xiě)的一個(gè)簡(jiǎn)單的無(wú)縫輪播 簡(jiǎn)易無(wú)縫輪播

那個(gè)就是無(wú)縫輪播。

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

就像這樣，在頭尾各添加一個(gè)副本，再加上輪播到真正的頭尾（即是我代碼的第二個(gè)img和第六個(gè)img），你加上if判斷，判斷你的list.style就OK了