JQuery slideshow的一个小问题_jquery_脚本之家

2019-11-28 18:10栏目:竞技宝竞猜
TAG:

第一阶段,试用slideshow 在做一个网页homepage的时候,想用slideshow[1]做图片切换效果,其中js部分代码如下: 复制代码 代码如下: function next_slide() { var $active = $('#bitware-overlay img.active'); if $active = $('#bitware-overlay img:last'); var $next = $active.next().length ? $active.next() : $('#bitware-overlay img:first'); $active.addClass; $next.addClass; $next.css; $next.animate({opacity: 1.0}, 1500,function(){ $active.removeClass { setInterval; }); 第二阶段,发现问题 在打开页面所以的正常测试都没问题,最后领导发现,当浏览器同时打开多个tab,停留他tab中的页面一段时间后,会出现图片是最后一张图片,然后变化为第一张图片,刚变化完成,就突然跳转到最后一张图片。当我改为: 复制代码 代码如下: function next_slide() { var $active = $('#bitware-overlay img.active'); if $active = $('#bitware-overlay img:last'); var $next = $active.next().length ? $active.next() : $('#bitware-overlay img:first'); $active.addClass; $next.addClass; $next.css; $next.animate; $active.removeClass(); setTimeout; } $ { setTimeout; }); 发现停留在其它tab后,回到页面时,图片显示的顺序正确,间隔时间也正确,4000毫秒,但是显示出来的时候,是直接跳转式,也不是淡出形状,似乎animate的1500毫秒没有启动任何效果。过一段时间会恢复正常,但是这种现象的时间长短,跟停留在别的tab时间长短似乎成正比。 第三阶段,解决问题 最后发现原因,是因为jquery的本质是单线程[2],当停留在别的tab中,任务中将next_silde()函数积压过多所致。最后找到的解决方案[4]如下: 复制代码 代码如下: function next_slide() { var $active = $('#bitware-overlay img.active'); if $active = $('#bitware-overlay img:last'); var $next = $active.next().length ? $active.next() : $('#bitware-overlay img:first'); $active.addClass; $next.addClass; $next.css; $next.animate({opacity: 1.0}, 1500,function(){ $active.removeClass(); setTimeout; }); } $ { setTimeout; });

兼容:ie9以上

特点:滑动图片看起来永远只有两帧,过度完美;是html css js的完美配合;其中html的data属性起了关键性作用

前提:normalize.css  jquery.js

html 代码:

图片 1<div class="wrapper"> <div class="carousel" id="carousel-generic"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel-generic" class="active">0</li> <li data-slide-to="1" data-target="#carousel-generic">1</li> <li data-slide-to="2" data-target="#carousel-generic">2</li> </ul> <!-- wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img alt="first slide" src="images/slide1.png" /> </div> <div class="item"> <img alt="second slide" src="images/slide2.png" /> </div> <div class="item"> <img alt="third slide" src="images/slide3.png" /> </div> </div> <!-- controls --> <a class="carousel-control left" data-slide="prev" href="#carousel-generic"> <span class="carousel-chevron-left"><</span> </a> <a class="carousel-control right" data-slide="next" href="#carousel-generic"> <span class="carousel-chevron-right">></span> </a> </div> </div> View Code

css 代码:

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:JQuery slideshow的一个小问题_jquery_脚本之家