文章详情页
javascript - 无缝轮播最后一张怎么切换到第一张?
问题描述
<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. css3 - 一篇文章有好多段 怎么控制整篇文章显示多少行 剩余省略 而不是每段控制2. 数据库创建失败3. PHP类中的$this4. javascript - 关于圣杯布局的一点疑惑5. css3 - Firefox 字号相对IE、Chrome更大,如何在CSS中统一?6. android - coordinatorLayout嵌套recyclerview7. javascript - 在html中写了个<video>视频,浏览器却是一片空白为什么呢?360浏览器?8. vue.js - weex scroller搭配refresh在android平台上拉会触发refresh9. Python Tornado批量上传图片并显示功能10. node.js - 使用npm安装vue-cli后,vue还是不可用是什么原因?
排行榜