[英]JQuery doesn't appear to be working in Wordpress
我的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之前的原始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);
});
提前致謝!!!!!!!
我愛你 ;)
使用jQuery
或$
而不要使用正在使用的內容。
您正在使用JQuery
,這是錯誤的。
但是,如果您真的想使用JQuery
,則可以執行以下操作:
var JQuery = jQuery;
現在,在分配之后,您可以使用JQuery
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.