文章詳情頁
javascript - 無縫輪播最后一張怎么切換到第一張?
瀏覽:119日期: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. javascript - 關于css絕對定位在ios瀏覽器被橡皮筋遮擋的問題2. python - beautifulsoup獲取網頁內容的問題3. python - 能通過CAN控制一部普通的家用轎車嗎?4. mysql優化 - 關于mysql分區5. javascript - react input file6. 人工智能 - python 機器學習 醫療數據 怎么學7. centos7 編譯安裝 Python 3.5.1 失敗8. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處9. html5 - 只用CSS如何實現input框的寬度隨框里輸入的內容長短自動適應?10. c++ - 請問MySQL_Connection::isReadOnly 怎么解決?
排行榜
