[问题] 用js刻轮播时遇到的问题

楼主: asdfg5247 (asdfg5247)   2018-05-22 20:49:10
大家好,目前小弟正在学用JS刻轮播
使用的教学是采用这个网站教学的
https://goo.gl/LJS1e6
但是当照他所写的去做时,发现到最后一张图片时并没有往回走
代码几乎跟他的一模一样,毕竟是参考他的
目前有想过将代码改成
function showtime() {
timer = setInterval(function () {
count++;
banner_ul.style.transform = "translate(" + -1215 * count
+ "px)";
if (count > banner_li.length) {
count = 0;
banner_ul.style.transform = "translate(" + 0 + "px)";
}
},3000);
直接到要超过最后一张图片时,将整个ul变成0px
但是还是没有触发if事件orz
因为卡很久了,想请问如果是他的版本,为什么第二个if并没有触发呢?
如果是我的版本,是不是要弄for循环,然后以if来判断最后一张图片会比较好?
作者: Rinorune (杜)   2018-05-22 21:21:00
可以用console.log去侦错 看哪里跟你预期不同
作者: chen5252 (锋炮炸裂)   2018-05-22 23:23:00
我照他的code贴去codepen是可以正常轮播,到最后一张也会往回走耶
作者: lin009 (lin009)   2018-05-22 23:32:00
你有把 code 放到线上吗~? 贴上来大家比较好 debug~
作者: chen5252 (锋炮炸裂)   2018-05-22 23:38:00
没看到code无法解,找个地方贴出来大家也才可以帮你看看问题在哪
作者: lin009 (lin009)   2018-05-24 13:46:00
这样不算完全照抄吧 XDhttps://jsfiddle.net/admo378z/9/ 你看看符不符合你的需求除了 chen 大说的问题外,ul 的 selector 也写错了,另外isgo 一直都是 false因为你把 js 放在 head 里面,如果没写 onload 的话,浏览器会先解析这段 script,然后才读到你写的那些 banner_ul等等的元件总之浏览器在执行这段 script 时,根本还没有这些 element,所以就读不到了通常有几种解法:1. 写 onload,叫浏览器等 window 都准备好后再跑这段2. 把 script 放在 body 的结束 tag 前面,这样确定浏览器会先读到 其他 html3. script tag 上可以设定其他 attr 让它晚点执行
作者: SeanGGG (Sean)   2018-05-24 22:55:00
改动UI的script大部分建议放在</body>前

Links booklink

Contact Us: admin [ a t ] ucptt.com