Jqurey页面轮播点击事件的循环问题

励志做个赚钱小能手 2015-10-11 08:36:56

这是一个点击侧边按键实现图片墙轮播的函数,这个函数是能实现的,但是我很不理解这样写的逻辑。下面第二张图才是按照我的理解的函数,但是按照我第二张图的理解确实现不了循环效果。

哪位好心的大神能帮我理一下这个函数的运行思路。难道不应该是先做if判断,再执行left偏移嘛?还有,为什么offset设成全局变量没有效果啊~
...全文
113 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
liusaint1992 2015-10-12
  • 打赏
  • 举报
回复
想了下,如果要先计算判断,在移动的话,你就计算一下,假如移动一次,移动之后的left值是多少。就是用当前的left值,加上或减去移动值,与边界值作比较。如果这个移动后的left值不在合适的范围内。就让left等于0,n等于1。回到起点。
liusaint1992 2015-10-12
  • 打赏
  • 举报
回复
1.按照 你的写法

offset只会获取一次 left的值。就是最开始的时候的值。它只执行一次。然后就不会变化了。

而第一种把offset写到点击事件里面去,每次点击的时候重新 计算一次 css("left")的值。所以offset的值是会随着你的点击而变化的。


2.由于你的 offset 的值没有变化。
所以n可能一直等于1,于是left的值也一直会等于-425,在你看起来就是点起来没有反应了。


3.另外,第一种方法 是先移动图片,移动完计算left如果移动超过正常范围,再移动回 left 0。

而你的思路来代码可以写成这样(我没写全)
$().on("click",function(){
var offset = ....
if(offset < -2975){
.css("left",0);
n=1;
}else{
.css("left",-425*n);
n++;
}

但事实 上这样的话你可能忽略了一个问题。
比如我现在是 -2974.
那么按你的逻辑,它是可以再移动的。
移动的结果就是 -3000多了。

你可以试试看效果。

而第一种就是如果出现了移动到-3000多的情况 立马移动回初始位置去。所以要好那么一点。



  • 打赏
  • 举报
回复
$(document).ready(function() {
var n = 1;
$("#arrowLeft").on("click", function() {
$(".imgList").css("left", -425 * n);
n++
if( n > 7){
n = 0
}
})
})

其实我知道这个简单的方法也能实现,但是就是不知道原理,为什么第一种方法不行?

87,955

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧