jQuery幻灯片没有正确循环

我正在开发一个带有背景图像幻灯片的启动页面，我想继续循环，但是现在它正在闪烁而不是均匀循环。 第一张图片不会停留在循环中： http ： //newmarketdvm.com/vsc/test/

这是代码。 我已经在幻灯片中嵌入了幻灯片代码，因为它是一个启动页面，我想知道这是否也会让它出现故障，但我似乎无法弄清楚图像类/它是否是它的问题。 我只是设置错误或我需要修改jQuery？

    function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); // uncomment the 3 lines below to pull the images in random order // var $sibs = $active.siblings(); // var rndNum = Math.floor(Math.random() * $sibs.length ); // var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 2500, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 2500 ); });   #slideshow { position: fixed; z-index: 0; } #slideshow IMG { position: fixed; top: 0; left: 0; z-index: auto; opacity: 0.0; } #slideshow IMG.active { z-index: auto; opacity: 1.0; } #slideshow IMG.last-active { z-index: auto; } #slideshow img { min-height: 100%; min-width: 100%; width: 100%; height: auto; position: fixed; top: 0; left: 0; } .enter { background: url('http://newmarketdvm.com/vsc/wp-content/themes/mono/images/splash-nav.png'); background-repeat: repeat-x; top: 85%; left: 0; position: absolute; z-index: 5000; width: 100%; height: 75px; display: block; } .enter p { font-size: 20px; font-weight: 300; line-height: 125%; color: #FFFFFF; font-family: Helvetica, Arial, sans-serif; z-index: auto; position: relative; padding-left: 50px; float: left; } .enter pa { text-decoration: none; color: #FFFFFF; } .enter pa:hover { color: #DDC997; } .enter p img { margin-top: -30px; position: relative; } @media screen and (max-width: 1024px) { img.bg { left: 50%; margin-left: -512px; }     
    
   

Answer 1

降低动画时间或增加间隔时间

你可能在动画结束和2.5秒之后的间隔发射之间遇到了竞争条件。

setInterval并不保证它会在设定的时间之后完全触发，因此它可能会在很晚之后执行几微秒等

更简单的代码可能更适合幻灯片放映

 function slideSwitch() { if( $('#slideshow img').length > 1 ) { //Make sure we have more than 1 img otherwise dont do a effect var active = $('#slideshow img:first'); //Active img is always first var next = active.next(); active.fadeOut(500,function(){ //Moves the current img to end of the DOM //so that the next image will now be returned //when `img:first`is used $("#slideshow").append($(this)); }); next.fadeIn(500); } } 

fadeIn和fadeOut是用于淡入和淡出元素的更简单的jquery函数，fadeOut和fadeIn间隔使得动画在0.5秒内发生，显示时间大约为2秒。

Answer 2

试试这个

 $next.addClass('active').animate({opacity:1.0, duration:1000, queue:false}); $active.removeClass('active').animate({opacity:0.0, duration:1000, queue:false}); 

这将同时改变两个元素的不透明度，因此不会有任何闪烁，并且还从类和所有图像元素中移除不透明度设置，并将其保持为1.0，仅用于默认启用且具有活动类的元素。

Answer 3

这些图像似乎没有任何语义值，您是否考虑将它们包含为background-image ？

因此，您只需添加以下css规则，而不是

：

 body { background-image: url(medicalteam.jpg); background-repeat: no-repeat; } 

那么javaScript应该是微不足道的。 例如，您可以使用url创建一个数组

 var imgs = [ "medicalteam.jpg", "dog-running-grass.jpg", "Hans-treadmill-2.jpg" ]; 

然后使用jQuery .css()方法为您的background-image加载一个新的url

 var slideshow = function slideshow(i) { // set default value for i and prevent it from exceeding the array length i = ( typeOf(i) !== 'undefined' and 0 <= i < imgs.length ) ? i : 0; $('body').css('background-image', imgs[i]); // setTimeOut executes the block after 2500ms setTimeOut(function () { // call the slideshow function recursively with i + 1 slideshow(i+1); }, 2500); } 

最后你只需调用slideshowfunction，最好使用另一个图像而不是CSS中指定的图像

 $(document).ready(function () { slideshow(1); }); 

我希望这适合你