文章詳情頁
javascript - 無縫輪播最后一張怎么切換到第一張?
瀏覽:160日期:2022-12-14 11:47:31
問題描述
<script> var next = document.getElementById('next'); var prev = document.getElementById('prev'); var ul = document.getElementsByTagName('ul')[0]; var li = document.getElementsByTagName('li'); var x=0; next.onclick = function(){x = x -289;ul.style.transform='translate3d('+x+'px,0,0)';} prev.onclick = function(){x = x +289;ul.style.transform='translate3d('+x+'px,0,0)'; }</script>
問題解答
回答1:可以把第一張復制,放到最后。例如: 123451當輪播到了最后一張1的時候,把整個的輪播圖移動位置還原為原始狀態。
回答2:把輪播圖clone出一個一樣的。(eg:(圖1圖2圖3)(圖1圖2圖3))
當圖片移動到序號為1的時候判斷有沒有上一個元素,如果沒有把后面整個sroll搬過去到最前面去,然后做輪播,否則直接輪播(這種情況注意定位的left值也要隨之先改變)
當移動到最后一張的時候同理
標簽:
JavaScript
相關文章:
1. docker 下面創建的IMAGE 他們的 ID 一樣?這個是怎么回事????2. 在應用配置文件 app.php 中找不到’route_check_cache’配置項3. html按鍵開關如何提交我想需要的值到數據庫4. css - width設置為100%之后列表無法居中5. ios - vue-cli開發項目webstrom會在stylus樣式報錯,飆紅,請大神幫忙6. javascript - 一個頁面有四個圖片,翻頁的時候想固定住某個圖片然后翻頁,如何實現呢?7. css3 - 怎么感覺用 rem 開發的不多啊8. html5 - 用Egret寫的小游戲,怎么分享到微信呢?9. python - 在pyqt中做微信的機器人,要在表格中顯示微信好友的名字,卻顯示不出來,怎么解決?10. objective-c - 自定義導航條為類似美團的搜索欄樣式
排行榜
