使用jQuery的fadeIn和fadeOut 两个方法做轮播效果,每当切换的时候都会闪一下白色(容器的背景色),后来我将容器的背景色变为黑色后,在firefox和chrome中不太容易看出来,但是在IE中却依然会闪烁(此时不是白色的)。该如何解决呢?是不是我js代码写的有问题呢?

(function(){

var currentIndex=1;

var time = 5000;

var currentLength = $(".banner_item li").length;

var setInter;

setInter1 = setInterval(move,time);

jQuery.easing.def = "easeOutQuad";

$(".banner_bottom_chose li").not($(".banner_bottom_chose li").last()).not($(".banner_bottom_chose li").first()).on("click",function(){

clearInterval(setInter1);

$(".banner_item li").stop(false,true).fadeOut("slow");// 将所有的状态回复 不然会有问题: 点击后面的再点击前面的图片不改变。

currentIndex = $(this).index() > currentLength ? 1 : $(this).index()-1;

move();

setInter1 = setInterval(move,time);

});

function move(){

$(".background_blue,.banner_bottom_title").stop(false,true).animate({left:currentIndex*115+20},300);

$(".banner_item li").eq(currentIndex-1<0 ? currentLength-1 :currentIndex-1).stop(false,true).fadeOut(1000);

$(".banner_text").eq(currentIndex-1<0 ? currentLength-1 :currentIndex-1).stop(false,true).animate({top:"340px"},800);

$(".banner_img").eq(currentIndex-1<0 ? currentLength-1 :currentIndex-1).stop(false,true).animate({right:"120px"},800);

setTimeout(function(){

$(".banner_item li").eq(currentIndex).stop(false,true).fadeIn(600);

$(".banner_text").eq(currentIndex).children("h2").css({paddingTop:"50px",paddingBottom:"50px"}).stop(false,true).animate({paddingTop:"0",paddingBottom:"0"},800);

$(".banner_text").eq(currentIndex).css({top:"0",opacity:"0"}).stop(false,true).animate({top:"170px",opacity:"1"},800);

$(".banner_img").eq(currentIndex).css({right:"-50px",opacity:"0"}).stop(false,true).animate({right:"10px",opacity:"1"},800);

currentIndex++;

if(currentIndex == currentLength){

currentIndex = 0;

}

},200)

}

})();

layui轮播图切换会有跳动_使用jQuery做了一个轮播图,但是在图片的切换中会出现闪烁情况,该如何解决?...相关推荐

  1. 鱼骨图分析法实际案例_【管理工具详解】鱼骨图分析法

    第一部分 鱼骨头分析法 一.鱼骨图分析法的由来 鱼骨图是由日本管理大师石川馨先生所发明出来的,故又名石川图.鱼骨图是一种发现问题"根本原因"的方法,它也可以称之为"Ish ...

  2. c++ 图的连通分量是什么_【自考】数据结构第五章图,期末不挂科指南,第9篇

    图的基本概念 首先,你要明确图是什么样子的,就是下面这个样子的 图的定义与术语 有向图和无向图 直接对比图就可以看出来,有向图和无向图的区别了,这个没有什么难的. 有向图和无向图的表示法有略微的区别, ...

  3. echart雷达图文字挤在一起_【数据可视化·图表篇】雷达图

    数据可视化基础图表系列的最后一篇终于跟大家见面了!今天小数将带大家走进雷达图. (之前关于柱状图.折线图.饼图和散点图的分享文章,感兴趣的小伙伴可以查看历史文章哦) 为方便大家理解,本文生成图表所使用 ...

  4. python画美图_用python做个街拍美图手册

    今天分享一篇在家就能养眼的技能,用python爬取街拍美女高清大图,然后批量插入word中,制作街拍美图手册,闲的时候就能拿出来养养眼.本文涉及知识主要包括Ajax动态加载网页爬取.requests保 ...

  5. 用JQ去实现一个轮播效果

    前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body><div class="pic"><div cl ...

  6. 定位的四个点怎么打_别被忽悠了,轮胎动平衡和四轮定位一定要区分清楚

    车辆行驶中遇到了跑偏,方向盘抖动等问题,到底是该做动平衡还是做四轮定位呢,很多人可能都不清楚,遇到一些不厚道的修理厂,可能就会借此让你多做一些项目,白白浪费钱,那该如何辨别区分这两种情况呢? 四轮定位 ...

  7. js中的图片指定切换效果

    js中的图片指定切换效果的实现 用到的js中的知识:js中的for循环的熟练运用 js中的this属性:指的是调用当前 方法 (函数) 的那个对象 js中的自定义属性:js可以为任意的HTML元素添加 ...

  8. js实现轮播图(点击小图片切换大图片+自动切换)

    js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...

  9. html5轮播怎么自动换图,js实现轮播图效果 纯js实现图片自动切换

    本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片: 2. 鼠标离开,恢复自动播放: ...

最新文章

  1. html5引入spring标签,[MVC]5 使用Spring标签库
  2. java action的头文件注释_有没有java大神,帮我详细注释下面的代码,action里面复制来的...
  3. 美国出手管制五家中国超算企业
  4. iOS开发常用的资源和资料
  5. MySQL--Centos7下安装5.7.19
  6. python调用phone库查询手机号码相关信息
  7. 高端物理学名词_物理专业名词
  8. linux应用程序使用aplay播放,Linux中如何解决Aplay不能播放问题
  9. Unity 自动化构建方案:一键实现版本管理与打包、压缩
  10. Font Replacer
  11. Treeview 无限分类非递归终极解决方案VB
  12. Docker 学习笔记(Docker 架构 / 镜像 / 容器 / 常用命令 / Dockerfile / 镜像仓库)
  13. 2021年度排第一名的微信段子,笑晕了,太经典
  14. 重磅!瑞泰信息发布中国企业数字化增长行业实践白皮书——《数字化平台造就企业增长新引擎》
  15. 多益网络_网络安全的未来日益激烈的信息控制之战
  16. 【汇总篇】各类电子元器件失效机理分析!
  17. 大创项目前传——爬虫阶段(1)
  18. GraphScope、Neo4j与TigerGraph单机环境下性能对比
  19. 如何使用12tool二维码合成器将多张二维码图片生成一张动态GIF图?
  20. 2015年第六届蓝桥杯省赛Java B组真题+个人题解

热门文章

  1. Werkzeug框架
  2. 关于拼多多开店的催单话术
  3. 工科女生求职记——电子信息科学与技术专业
  4. 湘潭校赛 Easy Wuxing
  5. ipad vs android,安卓和苹果平板简评 iPad2018和华为平板M610.8英寸版区别对比
  6. sqli-labs less 24 POST -Second Oder injection *Real treat* - Stored injections
  7. 银行卡号合法性验证小结
  8. java铃声_java多线程抓取铃声多多官网的铃声数据
  9. Nginx深入详解之upstream分配方式
  10. string::npos