Question

我在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);

}）;

提前致谢!!!!!!!

我爱你;）

Answer 1

使用jQuery或$而不是您正在使用的内容。

您使用的是JQuery，这是错误的。

但如果您真的想使用JQuery，那么您可以执行以下操作：

var JQuery = jQuery;

现在，在分配后，您可以使用JQuery

JQuery似乎没有在Wordpress中运行

1 个答案: