文章詳情頁
javascript - 無縫輪播最后一張怎么切換到第一張?
瀏覽:132日期: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. macos - mac下docker如何設置代理2. dockerfile - 為什么docker容器啟動不了?3. javascript - 如何獲取未來元素的父元素在頁面中所有相同元素中是第幾個?4. Android下,rxJava+retrofit 并發上傳文件和串行上傳文件的效率為什么差不多?5. apache - 本地搭建wordpress權限問題6. javascript - web網頁版app返回上一頁按鈕在ios設備失效怎么辦?安卓上可以,代碼如下,請大神幫助,萬分感謝。7. Whitelabel錯誤頁面發生意外錯誤(類型=未找到,狀態= 404)/WEB-INF/views/home.jsp8. 熱切期待朱老師的回復,網頁視頻在線播放器插件配置錯誤9. angular.js - ng-grid 和tabset一起用時,grid width默認特別小10. objective-c - iPhone如何實現微信的搖一搖功能?
排行榜
