0
在這個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>
我不明白你的意思? – Casyi
哦,我明白了!我將'imgsrc = $('。pikachoose')。css('background-image');'切換到hover函數上方,現在它可以工作。謝謝! – Casyi