我一直致力于开发一个有趣的解决方案来创建一个响应浏览器浏览器的整页图像滑块,一旦浏览器滚动它就可以让用户看到下面的内容。
我使用了一些jquery,并认为我找到了一个完美的解决方案!直到我到达项目结束并尝试向上和向下滚动。我注意到,当我向上和向下滚动时,帧速率似乎有点波动。做一些研究人员说这可能是因为" .animate"在我的jquery。这里的目标是避免使用插件,我想知道是否有人可以为我提供有用的解决方案?我是jquery和web开发的新手,所以我为这个项目创建了一个代码笔,以便有人能够分叉并帮助我。
这是我的jquery:
function slideSwitch() {
var $active = $('.image.active');
if ( $active.length === 0 ) $active = $('.image:last');
var $next = $active.next().length ? $active.next()
: $('.image:first');
$active.addClass('last-active');
$next.css({opacity: 0})
.addClass('active')
.animate({opacity: 1}, 600, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 6000 );
});
我的项目有很多CSS,所以如果我在这里发布我的代码笔可能会更有帮助:http://codepen.io/Develonaut/pen/rjvsn
感谢所有帮助!