社区
JavaScript
帖子详情
Jqurey页面轮播点击事件的循环问题
励志做个赚钱小能手
2015-10-11 08:36:56
这是一个点击侧边按键实现图片墙轮播的函数,这个函数是能实现的,但是我很不理解这样写的逻辑。下面第二张图才是按照我的理解的函数,但是按照我第二张图的理解确实现不了循环效果。
哪位好心的大神能帮我理一下这个函数的运行思路。难道不应该是先做if判断,再执行left偏移嘛?还有,为什么offset设成全局变量没有效果啊~
...全文
108
3
打赏
收藏
Jqurey页面轮播点击事件的循环问题
这是一个点击侧边按键实现图片墙轮播的函数,这个函数是能实现的,但是我很不理解这样写的逻辑。下面第二张图才是按照我的理解的函数,但是按照我第二张图的理解确实现不了循环效果。 哪位好心的大神能帮我理一下这个函数的运行思路。难道不应该是先做if判断,再执行left偏移嘛?还有,为什么offset设成全局变量没有效果啊~
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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多的情况 立马移动回初始位置去。所以要好那么一点。
励志做个赚钱小能手
2015-10-11
打赏
举报
回复
$(document).ready(function() {
var n = 1;
$("#arrowLeft").on("click", function() {
$(".imgList").css("left", -425 * n);
n++
if( n > 7){
n = 0
}
})
})
其实我知道这个简单的方法也能实现,但是就是不知道原理,为什么第一种方法不行?
JavaScript交互效果实战
静态
页面
能有啥意思,有互动才叫炫酷前端!本教程为一个前端互动效果合集,包含许多实用的互动小案例以及分页器、轮
播
图、放大镜、绚烂烟花四个大案例;互动是对DOM、
事件
、动画的综合运用,熟练制作各种炫酷的交互效果你就能拿到大OFFER!还不速度学起来!最后,作为辣椒与啤酒养大的猿类动物,桫哥风格依旧水煮;
vue中用swiper轮
播
框架Loop:true时点
击
事件
失效的解决方法
我们在写
页面
的时候如果用到轮
播
图的情况一般会使用swiper来解决,因为swiper可以很好的兼容pc端和移动端。
问题
但是我们在给loop:true时轮
播
中的
页面
写点
击
事件
,因为swiper的无限轮
播
时会自动复制第一个和最后一个
页面
进行轮
播
。但由于只复制
页面
没有复制点
击
事件
,此时我们用vue写的点
击
事件
在
页面
循环
一周回来遇到复制的
页面
时,点
击
事件
就会失效。 解决方法 对于这一
问题
到目前...
vue中用swiper轮
播
框架loop:true时点
击
事件
失效的解决方法
问题
描述:swiper轮
播
是可以点
击
去查看详情的,swiper的loop属性是true,当我们点
击
第一张图片和向左滑动到最后一张点
击
时触发不了
事件
的 原因:因为swiper的无限轮
播
时会自动复制第一个和最后一个
页面
进行轮
播
。但由于只复制
页面
没有复制点
击
事件
,此时我们用vue写的点
击
事件
在
页面
循环
一周回来遇到复制的
页面
时,点
击
事件
就会失效。 解决办法:就是不使用vue中的@:click进行操作,...
关于轮
播
图Carousel的loop导致点
击
事件
失效
问题
关于轮
播
图Carousel的loop导致点
击
事件
失效
问题
如果使用Carousel,使用loop
循环
,单有需求是动态点
击
轮
播
图,或者轮
播
图上面的按钮,跳转不同
页面
,但
循环
一圈之后click点
击
事件
会失效,查了一下原因是,在loop模式下slides前后会复制若干个slide,从而形成一个环路,但是却不会复制绑定在dom上的click
事件
。 解决方案: 1- 使用swiper加上swiper中的回调函数,click
事件
解决,可搜索相关文章。 2- 在Carousel外面加一个div,增加click
事件
,(1)
WEB前端中级DOM讲解
课程目标:本课程带领大家学习,网页中的实际功能的开发,如:轮
播
图片、购物车、右
击
菜单、表单验证等等功能的实现课程简介:第一章:BOM第二章:DOM基础第三章:DOM操作CSS第四章:DOM节点操作第五章:
事件
入门第六章:
事件
对象第七章:
事件
高级第八章:Element对象第九章:DOM尺寸和位置第十章:DOM操作表格第十一章:动态加载脚本和样式第十二章:Text节点操作第十三章:DOM进阶第十四章:作业第十五章:案例 1,轮
播
图片两种做法 2、选项卡案例 3,右
击
菜单案例 4、购物车案例5、登录注册案例6,动态加载案例7、置顶功能案例8、放大镜案例9,添加删除表格案例
JavaScript
87,779
社区成员
224,615
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章