Javascript幻灯片背景图片返回到选定页面图像盘旋出

在这个WordPress的网站：http://www.2eenheid.de/cloud/ theres幻灯片与菜单。每当用户将鼠标悬停在菜单项上时，背景图像就会变为其伴随的图像。当用户点击图像时，它会保留在相应的图像上。当用户将鼠标悬停在不同的菜单项上时（不点击），它也应该变回相应的图像。Javascript幻灯片背景图片返回到选定页面图像盘旋出

它以某种方式做到了这一点，但它记住了它最后放置的图像，而不是页面的相关图像。

因此，在短期：

当用户点击“云”它改变与之配套的图像，并保持悬停了。
当用户悬停在例如'虚拟主机'然后'单元4多重播放器'，背景图像变回到'虚拟主机'的伴随图像，因为这是它记住的最后一个项目。
由于用户位于此页面上，它应该变回“Cloud”伴随图像。

任何人都知道我在这里做错了什么？

JAVASCRIPT

<script type="text/javascript"> 
     $(function() { 
      var imgsrc = ''; 
      $('ul.slideshow-menu').find('a').hover(function() { 
       imgsrc = $('.pikachoose').css('background-image'); 
       var newImg = $(this).attr('src'); 
       $('.pikachoose').stop().fadeOut('slow', function() { 
        $(this).css({ 
         'background-image': 'url(' + newImg + ')' 
        }).fadeTo('slow', 1); 
       }); 

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

      }); 

     }); 
    </script>

HTML

  <div id="slideshow-main"> 
        <ul class="slideshow-menu"> 
         <li class="<?php if (is_page('supportenbeheer')) { echo "current_page_item"; }?>"><a title="Support/Beheer" href="/supportenbeheer" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-4.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-4.jpg" alt="2Eenheid"/><span>Support/Beheer</span></a></li> 
         <li class="<?php if (is_page('implementatie')) { echo "current_page_item"; }?>"><a href="/implementatie" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-5.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-5.jpg" alt="2Eenheid"/><span>Implementatie</span></a></li> 
         <li class="<?php if (is_page('cloud')) { echo "current_page_item"; }?>"><a href="/cloud" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-11.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-11.jpg" alt="2Eenheid"/><span>Cloud</span></a></li> 
         <li class="<?php if (is_page('webhosting-en-hosting')) { echo "current_page_item"; }?>"><a href="/webhosting-en-hosting" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-8.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-8.jpg" alt="2Eenheid"/><span>Webhosting/Hosting</span></a></li> 
         <li class="<?php if (is_page('unit4-multivers')) { echo "current_page_item"; }?>"><a href="/unit4-multivers" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-2.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-2.jpg" alt="2Eenheid"/><span>Unit4 Multivers</span></a></li> 
        </ul> 
       </div>

来源

2013-07-24 Casyi

如果我理解正确的话，我认为这个问题是你要点击之后，而不是改变之前设置IMGSRC的价值由于悬停。

来源

2013-07-24 07:55:16 DJL

我不明白你的意思？ – Casyi

哦，我明白了！我将'imgsrc = $（'。pikachoose'）。css（'background-image'）;'切换到hover函数上方，现在它可以工作。谢谢！ – Casyi

Javascript幻灯片背景图片返回到选定页面图像盘旋出

回答

相关问题