JQuery似乎不能在Wordpress中工作

我的WordPress主題中的標題標籤中包含以下內容，但不管它是行不通的。JQuery似乎不能在Wordpress中工作

<script>JQuery(function() {JQuery('#fader img:not(:first)').hide();JQuery('#fader img').css('position', 'absolute');JQuery('#fader img').css('top', '0px');JQuery('#fader img').css('left', '50%');JQuery('#fader img').each(function() {var img = JQuery(this);JQuery('<img>').attr('src', JQuery(this).attr('src')).load(function() {img.css('margin-left', -this.width/2 + 'px');});});var pause = false;function fadeNext() {JQuery('#fader img').first().fadeOut().appendTo(JQuery('#fader'));JQuery('#fader img').first().fadeIn();}function fadePrev() {JQuery('#fader img').first().fadeOut();JQuery('#fader img').last().prependTo(JQuery('#fader')).fadeIn();}JQuery('#fader, #next').click(function() {fadeNext();});JQuery('#prev').click(function() {fadePrev();});JQuery('#fader, .button').hover(function() {pause = true;},function() {pause = false;});function doRotate() {if(!pause) {fadeNext();}}var rotate = setInterval(doRotate, 2000);});</script>

亂七八糟的是對的嗎？爲了表明我一直在研究這個問題，以前的答案說刪除所有空格並用JQuery更改所有$。我想簡單地在推子ID中的幾張圖像之間淡入淡出。

我甚至做了一個fade.js文件，並將其包含在函數文件中，但無濟於事。

這裏是我的CSS ...

#fader { 
    position: relative; 
    width: 100%; 
    height: 400px; 
} 

.button { 
    background-color: green; 
    width: 50px; 
    height: 30px; 
    font-size: 20px; 
    line-height: 30px; 
    text-align: center; 
    position: absolute; 
    top: 30px; 
} 

#next { 
    right: 100px; 
} 

#prev { 
    left: 100px; 
}

而我的HTML ...

<div id="fader"> 
    <img src="http://dummyimage.com/600x400/000/fff.png&text=Image1"/> 
    <img src="http://dummyimage.com/200x400/f00/000.jpg&text=Image2"/> 
    <img src="http://dummyimage.com/100x100/0f0/000.png&text=Image3"/> 
    <img src="http://dummyimage.com/400x400/0ff/000.gif&text=Image4"/> 
    <img src="http://dummyimage.com/350x250/ff0/000.png&text=Image5"/> 
</div>

而不是顯示一個圖像，並提供了5張圖片之間的衰落，它只是顯示所有5張圖片與此同時。

我首先想到這可能是一個JQuery問題，所以經過測試以查看JQuery是否正常工作。

這是原來的JQuery，我刪除whitespaces和交換$ JQuery。

$(function() { 
$('#fader img:not(:first)').hide(); 
$('#fader img').css('position', 'absolute'); 
$('#fader img').css('top', '0px'); 
$('#fader img').css('left', '50%'); 
$('#fader img').each(function() { 
    var img = $(this); 
    $('<img>').attr('src', $(this).attr('src')).load(function() { 
     img.css('margin-left', -this.width/2 + 'px'); 
    }); 
}); 

var pause = false; 

function fadeNext() { 
    $('#fader img').first().fadeOut().appendTo($('#fader')); 
    $('#fader img').first().fadeIn(); 
} 

function fadePrev() { 
    $('#fader img').first().fadeOut(); 
    $('#fader img').last().prependTo($('#fader')).fadeIn(); 
} 

$('#fader, #next').click(function() { 
    fadeNext(); 
}); 

$('#prev').click(function() { 
    fadePrev(); 
}); 

$('#fader, .button').hover(function() { 
    pause = true; 
},function() { 
    pause = false; 
}); 

function doRotate() { 
    if(!pause) { 
     fadeNext(); 
    }  
} 

var rotate = setInterval(doRotate, 2000);

}）;

在此先感謝!!!!!!!

我愛你;）

來源

2014-04-18 Marshall

你檢查你的錯誤控制檯？你應該看到一條消息，它清楚地說明了發生了什麼，你正在使用和未定義變量'JQuery'，'j'是小寫字母。 –

謝謝我已經更改爲jQuery，仍然在錯誤「未捕獲的ReferenceError：未定義jQuery」 – Marshall

JQuery似乎不能在Wordpress中工作

回答

相關問題