在说这两个之前先说一个在做轮播图时,逻辑处理的一个思路的错误。在做轮播图中,我又两个变量来记录轮播图的变化的情况的,一个是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

有联系的标识变量的变化一定要同步相关推荐

  1. WPF 让窗口激活作为前台最上层窗口的方法

    在 WPF 中,如果想要使用代码控制,让某个窗口作为当前用户的输入的逻辑焦点的窗口,也就是在当前用户活动的窗口的最上层窗口,默认使用 Activate 方法,通过这个方法在大部分设备都可以做到激活窗口 ...

  2. inotify结合rsync监控目录的实时变化

    inotify结合rsync监控目录的实时变化 Inotigy安装使用 /bin/sh/server/scripts/inotify.sh & 放入rc.local配置文件,自行启动 优点:监 ...

  3. Shell 监控文件变化

    作者:youxin 链接:https://www.cnblogs.com/youxin/p/13816303.html 文件监控可以配合rsync实现文件自动同步,例如监听某个目录,当文件变化时,使用 ...

  4. 缓慢变化维解决方案——拉链表实现详解

    缓慢变化维--拉链表实现 1.概述 1 缓慢变化维简介 缓慢变化维,简称SCD(Slowly Changing Dimensions) 一些维度表的数据不是静态的,而是会随着时间而缓慢地变化(这里的缓 ...

  5. OpenShift 4 - 使用 Debezium 捕获变化数据,实现MySQL到PostgreSQL数据库同步(附视频)

    <OpenShift / RHEL / DevSecOps 汇总目录> 说明:本文已经在OpenShift 4.10环境中验证 文章目录 场景说明 部署环境 安装CDC源和目标数据库 安装 ...

  6. 【数据仓库】缓慢变化维介绍及其解决SCD问题

    目录 介绍 举例说明 SCD问题的几种解决方案 保留原始值(不推荐) 改写属性值(不推荐) 增加维度新行(推荐) 增加维度新列(不推荐) 添加历史表(不推荐) 使用拉链表保存历史快照思路 拉链表 12 ...

  7. 内核同步机制-RCU同步机制

    转自http://www.360doc.com/content/09/0805/00/36491_4675691.shtml 目录 [隐藏] 1 RCU同步机制 1.1 RCU介绍 1.2 RCU A ...

  8. 数据库 大数据访问及分区分块优化方案

    本文导读:当系统要满足每秒数万次的读写请求的需求时,我们可以用分布式计算.编写优良的程序代码.对海量数据进行分区操作.建立广泛的索引.建立缓存机制.加大虚拟内存.分批处理.使用数据仓库和多维数据库存储 ...

  9. 基于Idea从零搭建一个最简单的vue项目

    一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...

最新文章

  1. 阿里云直播服务 sdk demo php
  2. 收藏开发人员常去网站
  3. SQL Server 中的时间算法
  4. java中的布局文件改成,Android 动态设置布局文件的exception
  5. Java Number shortValue()方法与示例
  6. 设计灵感|纯文字排版也能让海报引人注目
  7. Linux目录树与文件系统
  8. 02_HBase集群部署
  9. 20.案例实战:为@Async实现一个自定义线程池
  10. 误删数据库---恢复
  11. RunLoop 原理和核心机制
  12. go的匿名函数和闭包
  13. Latex数学符号输入大全
  14. cc直播怎么显示服务器,CC直播像素杯四大服务器严阵以待 MC精彩赛事即刻开启...
  15. Linux安装wget
  16. Unity3D笔记第十五天——Unity2D技术
  17. Spring Data JPA/Hibernate 运行期动态模型、动态实体建表、动态字段查询的方式
  18. 分布式ssh_使用SSH的分布式管理
  19. 国外数据挖掘方面的经典博客
  20. tcp/ip网络编程--accept()函数返回的套接字

热门文章

  1. 上海JAVA5月就业环境,各位上海的大佬们呀 我准备下个礼拜出去上海找工作了!一年半的...
  2. 跨省游恢复!酒店行业怎么利用小程序抓住机会,应该做哪些?
  3. 使用JavaFX完成刽子手游戏
  4. python实现hbase增删改查
  5. 热备用冷备用_个性化您的备用帐户的10种方法
  6. Python简单爬虫(以爬取豆瓣高分图书为例)
  7. 迪士尼鳄鱼洗澡背后的传奇人物:哥以前是干DJ的!
  8. 2023.02.07草图大师SU模型渲染- 效果图之加深颜色的色调
  9. 「冰羚」— 撑起自动驾驶未来的“中间件”
  10. 学习使用ffmpeg命令给视频添加一张设计好的背景图片