| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 3724 人关注过本帖
标题:js实现的轮播图,存在问题~~(详细问题见下面),求大神帮解决~~
只看楼主 加入收藏
境善
Rank: 2
等 级:论坛游民
帖 子:76
专家分:16
注 册:2012-10-29
结帖率:86.21%
收藏
已结贴  问题点数:2 回复次数:11 
js实现的轮播图,存在问题~~(详细问题见下面),求大神帮解决~~
问题:自动轮播图中,当一次遍轮播完之后,再次轮播第一张图片时,第一张图片未出现。。怎么回事?

demo6.zip (143.22 KB)
搜索更多相关主题的帖子: 图片 
2015-05-07 10:11
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8078
专家分:6657
注 册:2005-11-7
收藏
得分:0 
代码稍微有点多,你要是不着急,就等等,我研究一下,这个问题应该是个很小的bug

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-05-07 21:21
tlliqi
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
等 级:贵宾
威 望:204
帖 子:15453
专家分:65956
注 册:2006-4-27
收藏
得分:0 
看了一下 没看懂
2015-05-07 22:43
境善
Rank: 2
等 级:论坛游民
帖 子:76
专家分:16
注 册:2012-10-29
收藏
得分:0 
嗯,好的,再次轮播第一张图时,让第一张图看着是从下向上轮播的,而不是从上向下轮播的。。谢谢啦
2015-05-07 23:01
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8078
专家分:6657
注 册:2005-11-7
收藏
得分:0 
楼主,我找到问题了
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时的情况,其实根本没必要

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-05-08 09:40
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8078
专家分:6657
注 册:2005-11-7
收藏
得分:0 
话说楼主记得结贴

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-05-08 09:42
境善
Rank: 2
等 级:论坛游民
帖 子:76
专家分:16
注 册:2012-10-29
收藏
得分:0 
回复 6楼 冰镇柠檬汁儿
恩 好的啊 但是 我希望的效果是 当再次轮播时,让第一张图看着是从下向上轮播的,而不是从上向下轮播的。。。你改的demo,再次轮播时,第一张图片依然是从上向下轮播的。。。麻烦再改改~~谢谢啦啊
2015-05-08 19:44
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8078
专家分:6657
注 册:2005-11-7
收藏
得分:0 
你给的这个demo不能实现这个功能的,你调用的那个js文件,是你自己完成的吗?
实现通向循环轮播的代码和你用的这个js文件的算法是不同的,帮你改,我需要重写了,如果你不着急实现这个功能,我建议你自己完成一下,如果有什么问题再来问。
思路是每轮播一次,就将本来移动到上面已被盖住的第一个li元素appendChild到ul元素的末尾

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-05-08 22:01
境善
Rank: 2
等 级:论坛游民
帖 子:76
专家分:16
注 册:2012-10-29
收藏
得分:0 
回复 8楼 冰镇柠檬汁儿
   这个demo是可以实现的,原理:当轮播到第五张图片是,将第一张的定位设为relative,并将其移动到第五张图片的下面,这样的话,当再次轮播时,第一张图片看着就是从下向上走了,之后,再将第一张图片的定位设为static,并将oUl的top值设为0,继续轮播就可以了,问题就是,再次轮播时,我的第一张图片未出现。。
2015-05-09 08:25
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8078
专家分:6657
注 册:2005-11-7
收藏
得分:0 
境善,我之前把问题想简单了,我可以收回我8楼发的贴吗,抱歉了,请别急,再让我研究一下,我一定给你个满意的答复

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-05-09 21:21
快速回复:js实现的轮播图,存在问题~~(详细问题见下面),求大神帮解决~~
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.017647 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved