本人是初學(xué)者,準(zhǔn)備模仿像 豆瓣讀書(shū) 這種輪播圖。我大概知道方法是設(shè)置 overflow: hidden 然后改變內(nèi)容的 left 屬性值,動(dòng)畫(huà)效果是 CSS transition??墒腔阶詈笠粡?jiān)趺崔k?怎么無(wú)縫滑動(dòng)到第一張?網(wǎng)上的教程說(shuō)可以復(fù)制第一張,然后迅速切回初始位置。我試了一下:var a = $('.slide-list');a.append(a.children()[0].outerHTML); // 復(fù)制第一幀附到最后$('btn-next').click(()=>{ curPos += width; // 更新到下一幀的位置 if (curPos > end) { a.css('left', curPos+'px'); // 滑到了復(fù)制的那一幀 a.css('transition', 'none'); // 在切換前關(guān)閉動(dòng)畫(huà) curPos = start; a.css('left', curPos+'px'); // 切換回起始位置 a.css('transition', 'left ease 0.5s'); // 恢復(fù)動(dòng)畫(huà) } else a.css('left', curPos+'px');}) 可是沒(méi)有預(yù)期的效果。請(qǐng)問(wèn)正確的方法應(yīng)該怎么做? 謝謝~
如何實(shí)現(xiàn) CSS 無(wú)縫輪播圖?
德瑪西亞99
2018-10-18 14:15:02