有联系的标识变量的变化一定要同步
在说这两个之前先说一个在做轮播图时,逻辑处理的一个思路的错误。在做轮播图中,我又两个变量来记录轮播图的变化的情况的,一个是img_index,用来记录当前的图片,一个是left_index,用来记录向左偏移的距离,如图:
我在最后一张,和第一张之间的跳转有一个过渡,实现的思路就是前后两端,各插入后前两端的两张图片,在过渡的时候,先也是正常地滚动一张图片的距离,在滚动动画结束后,在设置img_index,和left_index为最后一张或第一张的值,并将样式应用上去(直接用css,此处不能有过渡)。这样的做法在用户点击速度不快的时候,完美实现视觉效果上的圆环轮播。但是点击快的时候,过了尽头(31往右,1王左),就会出现空白,left的值设置到了没有图片的区域。后面我才发现原因是img_index和left_index在尽头的时候,变化不同步,一个是直接变化,一个是放在animate的回调函数里面变化的。导致点击速度过快的时候,回调函数还没有执行(left_index还没有变化),img_index已经变化了好几次,等到left_index变化(回调函数执行的时候),img_index和left_index已经不同步了。代码如下:
$(".mid-img>.to-right").on("click", function () {//变化偏移量和图片indexif(self.img_index==self.img_num){//此处是当图片为最后一张的时候的时候,改变是不一样的self.left_index=self.left_index-1004;var index_temp=0+2;self.img_index=0;$(".go_span:first").stop().animate({left: self.left_index+"px"},300,function(){//这个做法可取么???如果使用到stop来停止函数的话,这个是不可取的,因为只要点击了,就一定要有位移//这个是位移后立马变回的。s//这个是位移后立马变回的。self.left_index=(0-index_temp)*1004;$(".go_span:first").css({left:self.left_index+"px"});});$(".index-header>li:eq("+self.img_index+")").addClass("li-red-bg");$(".index-header>li:eq("+self.img_index+")").siblings().removeClass("li-red-bg");//修改标题的文字------------------var title=$(".go_span>a:eq("+index_temp+")").prop("title");$(".mid-img>.bottom-text").text(title);}else {self.img_index=self.img_index+1;self.left_index=self.left_index-1004;self.go();}});
吧这个错误的思路修正就是,吧img_index的变化也放进animate的回调函数里面。:代码如下:
//给向右移动添加事件$(".mid-img>.to-right").on("click", function () {//变化偏移量和图片indexif(self.img_index==self.img_num){//此处是当图片为最后一张的时候的时候,改变是不一样的self.left_index=self.left_index-1004;var index_temp=0+2;$(".go_span:first").stop().animate({left: self.left_index+"px"},300,function(){//这个做法可取么???如果使用到stop来停止函数的话,这个是不可取的,因为只要点击了,就一定要有位移//这个是位移后立马变回的。s//这个是位移后立马变回的。self.left_index=(0-index_temp)*1004;self.img_index=0;$(".go_span:first").css({left:self.left_index+"px"});$(".index-header>li:eq("+self.img_index+")").addClass("li-red-bg");$(".index-header>li:eq("+self.img_index+")").siblings().removeClass("li-red-bg");});//修改标题的文字------------------var title=$(".go_span>a:eq("+index_temp+")").prop("title");$(".mid-img>.bottom-text").text(title);}else {self.img_index=self.img_index+1;self.left_index=self.left_index-1004;self.go();}});
总结就是,如果有两个标识变量,他们是有联系的,他们的变化一定要同步,同步的时间应该是相同的,不要一个放在回调函数里面,一个放在回调函数外面,因为回调函数不确定什么时候能够执行(有肯会被延迟或中断)。
在做这个轮播图,还遇到jquery中的stop()和animate()中的回调函数一齐出现时引发的现象,且看下回,当stop()遇到animate的回调函数。
转载于:https://www.cnblogs.com/thonus/p/6066462.html
有联系的标识变量的变化一定要同步相关推荐
- WPF 让窗口激活作为前台最上层窗口的方法
在 WPF 中,如果想要使用代码控制,让某个窗口作为当前用户的输入的逻辑焦点的窗口,也就是在当前用户活动的窗口的最上层窗口,默认使用 Activate 方法,通过这个方法在大部分设备都可以做到激活窗口 ...
- inotify结合rsync监控目录的实时变化
inotify结合rsync监控目录的实时变化 Inotigy安装使用 /bin/sh/server/scripts/inotify.sh & 放入rc.local配置文件,自行启动 优点:监 ...
- Shell 监控文件变化
作者:youxin 链接:https://www.cnblogs.com/youxin/p/13816303.html 文件监控可以配合rsync实现文件自动同步,例如监听某个目录,当文件变化时,使用 ...
- 缓慢变化维解决方案——拉链表实现详解
缓慢变化维--拉链表实现 1.概述 1 缓慢变化维简介 缓慢变化维,简称SCD(Slowly Changing Dimensions) 一些维度表的数据不是静态的,而是会随着时间而缓慢地变化(这里的缓 ...
- OpenShift 4 - 使用 Debezium 捕获变化数据,实现MySQL到PostgreSQL数据库同步(附视频)
<OpenShift / RHEL / DevSecOps 汇总目录> 说明:本文已经在OpenShift 4.10环境中验证 文章目录 场景说明 部署环境 安装CDC源和目标数据库 安装 ...
- 【数据仓库】缓慢变化维介绍及其解决SCD问题
目录 介绍 举例说明 SCD问题的几种解决方案 保留原始值(不推荐) 改写属性值(不推荐) 增加维度新行(推荐) 增加维度新列(不推荐) 添加历史表(不推荐) 使用拉链表保存历史快照思路 拉链表 12 ...
- 内核同步机制-RCU同步机制
转自http://www.360doc.com/content/09/0805/00/36491_4675691.shtml 目录 [隐藏] 1 RCU同步机制 1.1 RCU介绍 1.2 RCU A ...
- 数据库 大数据访问及分区分块优化方案
本文导读:当系统要满足每秒数万次的读写请求的需求时,我们可以用分布式计算.编写优良的程序代码.对海量数据进行分区操作.建立广泛的索引.建立缓存机制.加大虚拟内存.分批处理.使用数据仓库和多维数据库存储 ...
- 基于Idea从零搭建一个最简单的vue项目
一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...
最新文章
- 阿里云直播服务 sdk demo php
- 收藏开发人员常去网站
- SQL Server 中的时间算法
- java中的布局文件改成,Android 动态设置布局文件的exception
- Java Number shortValue()方法与示例
- 设计灵感|纯文字排版也能让海报引人注目
- Linux目录树与文件系统
- 02_HBase集群部署
- 20.案例实战:为@Async实现一个自定义线程池
- 误删数据库---恢复
- RunLoop 原理和核心机制
- go的匿名函数和闭包
- Latex数学符号输入大全
- cc直播怎么显示服务器,CC直播像素杯四大服务器严阵以待 MC精彩赛事即刻开启...
- Linux安装wget
- Unity3D笔记第十五天——Unity2D技术
- Spring Data JPA/Hibernate 运行期动态模型、动态实体建表、动态字段查询的方式
- 分布式ssh_使用SSH的分布式管理
- 国外数据挖掘方面的经典博客
- tcp/ip网络编程--accept()函数返回的套接字
热门文章
- 上海JAVA5月就业环境,各位上海的大佬们呀 我准备下个礼拜出去上海找工作了!一年半的...
- 跨省游恢复!酒店行业怎么利用小程序抓住机会,应该做哪些?
- 使用JavaFX完成刽子手游戏
- python实现hbase增删改查
- 热备用冷备用_个性化您的备用帐户的10种方法
- Python简单爬虫(以爬取豆瓣高分图书为例)
- 迪士尼鳄鱼洗澡背后的传奇人物:哥以前是干DJ的!
- 2023.02.07草图大师SU模型渲染- 效果图之加深颜色的色调
- 「冰羚」— 撑起自动驾驶未来的“中间件”
- 学习使用ffmpeg命令给视频添加一张设计好的背景图片