文章详情页
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. css - 关于input标签disabled问题2. java基础,求解答。3. docker api 开发的端口怎么获取?4. css3中translate(-50%,-50%)对 transform-origin的奇葩影响?5. 如何调整IDEA中直接运行java程序的日志输出级别?6. javascript - 静态页面引公共头尾文件,js怎么写吖?7. debian - docker依赖的aufs-tools源码哪里可以找到啊?8. javascript - vue 数据更新了。但是dom没有更新,,,,,如图9. html5 - 百度Ueditor代码高亮和代码段滚动条冲突是怎么回事?10. php mysql数据库 产品分类与产品详情应该怎么做?
排行榜