文章详情页
javascript - 无缝轮播最后一张怎么切换到第一张?
浏览:125日期: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. android clickablespan获取选中内容2. 关于docker下的nginx压力测试3. 关于Java引用传递的一个困惑?4. docker安装后出现Cannot connect to the Docker daemon.5. angular.js - angularjs的自定义过滤器如何给文字加颜色?6. javascript - 最终生成的jsBundle文件压缩问题7. python - TypeError: tryMsgcode() takes exactly 2 arguments (0 given)8. 如何分别在Windows下用Winform项模板+C#,在MacOSX下用Cocos Application项目模板+Objective-C实现一个制作游戏的空的黑窗口?9. javascript - canvas 裁剪空白区域10. nignx - docker内nginx 80端口被占用
排行榜
