注册 登录
编程论坛 JavaScript论坛

js实现的轮播图,存在问题~~(详细问题见下面),求大神帮解决~~

境善 发布于 2015-05-07 10:11, 3724 次点击
问题:自动轮播图中,当一次遍轮播完之后,再次轮播第一张图片时,第一张图片未出现。。怎么回事?

只有本站会员才能查看附件,请 登录
11 回复
#2
冰镇柠檬汁儿2015-05-07 21:21
代码稍微有点多,你要是不着急,就等等,我研究一下,这个问题应该是个很小的bug
#3
tlliqi2015-05-07 22:43
看了一下 没看懂
#4
境善2015-05-07 23:01
嗯,好的,再次轮播第一张图时,让第一张图看着是从下向上轮播的,而不是从上向下轮播的。。谢谢啦
#5
冰镇柠檬汁儿2015-05-08 09:40
楼主,我找到问题了
function toRun() {
    iNow = ++iNow % aBtn.length;
    for (var i = 0; i < aBtn.length; i++) {
        aBtn[i].className = '';
    }
    aBtn[iNow].className = 'active';
    startMove(oUl, { top: -onesize * iNow });
}
问题都在这个函数中,你做了太多多余的事情
我标红的一行是在循环iNow的值,之前你的问题就是没有控制好这个变量,多加的iNow2变量是个多余的东西,反倒让你的逻辑混乱了,删掉吧.
之前你还控制过第一个li元素的样式,也是多余的,要不是这个样式控制,你能更快的找到问题
我标蓝的一行,你原来还写了个匿名函数,也是多余的,单独处理iNow为0时的情况,其实根本没必要
#6
冰镇柠檬汁儿2015-05-08 09:42
话说楼主记得结贴
#7
境善2015-05-08 19:44
回复 6楼 冰镇柠檬汁儿
恩 好的啊 但是 我希望的效果是 当再次轮播时,让第一张图看着是从下向上轮播的,而不是从上向下轮播的。。。你改的demo,再次轮播时,第一张图片依然是从上向下轮播的。。。麻烦再改改~~谢谢啦啊
#8
冰镇柠檬汁儿2015-05-08 22:01
你给的这个demo不能实现这个功能的,你调用的那个js文件,是你自己完成的吗?
实现通向循环轮播的代码和你用的这个js文件的算法是不同的,帮你改,我需要重写了,如果你不着急实现这个功能,我建议你自己完成一下,如果有什么问题再来问。
思路是每轮播一次,就将本来移动到上面已被盖住的第一个li元素appendChild到ul元素的末尾
#9
境善2015-05-09 08:25
回复 8楼 冰镇柠檬汁儿
额   这个demo是可以实现的,原理:当轮播到第五张图片是,将第一张的定位设为relative,并将其移动到第五张图片的下面,这样的话,当再次轮播时,第一张图片看着就是从下向上走了,之后,再将第一张图片的定位设为static,并将oUl的top值设为0,继续轮播就可以了,问题就是,再次轮播时,我的第一张图片未出现。。
#10
冰镇柠檬汁儿2015-05-09 21:21
境善,我之前把问题想简单了,我可以收回我8楼发的贴吗,抱歉了,请别急,再让我研究一下,我一定给你个满意的答复
#11
冰镇柠檬汁儿2015-05-10 00:00
只有本站会员才能查看附件,请 登录

终于弄好了,主要原因是你把top的值写错了,设置成relative时,应该设置成 +750px,而不是 -750px
其他的修改都是对脚本的一些优化,你定义的iNow2的变量应该是你准备在iNow为length-1时的特殊处理,我没采用,只是用了个判断单独处理了一下。
#12
境善2015-05-10 11:23
回复 11楼 冰镇柠檬汁儿
恩  是的 3Q~~
1