JQUERY淡入淡出幻燈片

我有一個幻燈片在這個WordPress的網站www.2eenheid.de。我想弄清楚如何使圖像淡入淡出，因此它在圖像之間淡入，而不是先褪色成白色bg顏色，然後再進入圖像。任何線索如何在我的情況下做到這一點，見下文？JQUERY淡入淡出幻燈片

的JavaScript：

<script type="text/javascript"> 
     $(function() { 
      var imgsrc = ''; 
      imgsrc = $('.pikachoose').css('background-image'); 

      $('ul.slideshow-menu').find('a').hover(function() { 
       var newImg = $(this).attr('src'); 
       $('.pikachoose').stop().fadeOut('slow', function() { 
        $(this).css({ 
         'background-image': 'url(' + newImg + ')' 
        }).fadeTo('fast', 1); 
       }); 

      }, function() { 
       $('.pikachoose').stop().fadeOut('slow', function() { 
        $(this).css({ 
         'background-image': imgsrc 
        }).fadeTo('fast', 1); 
       }); 
      }); 

     }); 
    </script>

HTML：

<div id="slideshow-main"> 
    <ul class="slideshow-menu"> 
    <li class=""><a title="Support/Beheer" href="/supportenbeheer" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-4.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-4.jpg" alt="2Eenheid"/><span>Support/Beheer</span></a></li> 
    <li class=""><a href="/implementatie" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-5.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-5.jpg" alt="2Eenheid"/><span>Implementatie</span></a></li> 
    <li class="current_page_item"><a href="/cloud" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-11.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-11.jpg" alt="2Eenheid"/><span>Cloud</span></a></li> 
    <li class=""><a href="/webhosting-en-hosting" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-8.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-8.jpg" alt="2Eenheid"/><span>Webhosting/Hosting</span></a></li> 
    <li class=""><a href="/unit4-multivers" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-2.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-2.jpg" alt="2Eenheid"/><span>Unit4 Multivers</span></a></li> 
    </ul> 
    </div>   
</div>

來源

2013-08-01 Casyi

嘗試該類pikachoose設置不透明度爲1

.pikachoose 
{ 
    opacity:1 !important; 
}

enter image description here

來源

2013-08-01 08:46:57

謝謝，我做到了，但現在它不褪色的所有了。（查看網站的效果） – Casyi

衰落意味着圖像中的不透明度從1減少到0，並且下一個圖像的不透明度從0增加到1 ....在questuion中，yiu提到了你不需要衰落...所以我給了這個解決方案...我不知道如何淡化你的期望？ –

哦，我想保持褪色，但沒有在之間的白色BG。我在Toggle中輸入了錯誤信息。編輯它.. – Casyi

用z-index做到這一點。

CSS

#slideshow-main { position: relative } 

.slideshow-main img {z-index: 1; position: absolute; } 

.slideshow-main img.active {z-index: 3; }

JQUERY

function cycleImages(){ 

     var $active = $('#slideshow .active'); 
     var $next = ($active.next().length > 0) ? $active.next() : $('#slideshow img:first'); 
     $next.css('z-index',2);//move the next image up the pile 
     $active.fadeOut(1500,function(){//fade out the top image 
      $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image 
      $next.css('z-index',3).addClass('active');//make the next image the top one 
     }); 
    } 
$(function(){ 
    setInterval('cycleImages()', 10000); 
});

來源

2015-07-02 14:33:41

JQUERY淡入淡出幻燈片

回答

相關問題