Jquery 使用wordpress在时间间隔和悬停在链接上时更改图像
我想问一下,如何使图像在时间间隔上发生变化,比如说在5秒之后,这些相同的图像会根据链接的悬停位置发生变化,就像在www.gamespot.com这样的网站上一样。 我有以下链接:Jquery 使用wordpress在时间间隔和悬停在链接上时更改图像,jquery,html,css,wordpress,Jquery,Html,Css,Wordpress,我想问一下,如何使图像在时间间隔上发生变化,比如说在5秒之后,这些相同的图像会根据链接的悬停位置发生变化,就像在www.gamespot.com这样的网站上一样。 我有以下链接: <ul class="ul1"> <li class="li1"><a class="link1" title="CRM" href="http://link1" target="_self">CRM</ a><li>
<ul class="ul1">
<li class="li1"><a class="link1" title="CRM" href="http://link1" target="_self">CRM</ a><li>
<li class="li1"><a class="link1" title="Apskaita ir finansai" href="http://link2" target="_self">Apskaita ir finansai</a></li>
<li class="li1"><a class="link1" title="Darbo užmokestis" href="http://link3" target="_self">Darbo užmokestis</a></li>
<li class="li1"><a class="link1" title="Kasos terminalas" href="http://link4" target="_self">Kasos terminalas</a></li>
</ul>
我将.js文件添加到“wp includes/js/jquery”中。我打开header.php并在“head”标记中添加:
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type="text/javascript" src="/wp-includes/js/jquery/image-on-time.js"></script> /*my .js function*/
我的页面上的html语法:
<div id="gallery1">
<article>
<img src="img1.jpg" class="active"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
</article>
我甚至改变了.js的调用方式:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/wp-includes/js/jquery/image-on-time.js"></script>
但一切都没有改变。。谁能告诉我我做错了什么吗?。。
所以没有人对wordpress有一点了解?使用“jQuery”这个词而不是$符号,然后调用jQuery.noConflict 始终在一个文件中编写任何可能在黄砖路上某处使用的重要脚本。否则,您必须重新编写代码或手动搜索它。说到这里,你可能应该参考WordPress手册,或者查看类似的论坛!好的,我用chromes developer tools检查了代码,发现了这个错误:未捕获的TypeError:object[object Window]的属性“$”不是一个函数,所以我想我必须将$更改为其他值,但如何正确执行呢?。。
<div id="gallery1">
<article>
<img src="img1.jpg" class="active"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
</article>
var $j = jQuery.noConflict();
$j(function swapImages(){
var $j(active) = $j('#gallery1 .active');
var $j(next) = ($j('#gallery1 .active').next().length > 0) ? $('#gallery1 .active').next () : $j('#gallery1 img:first');
$j(active).fadeOut(function(){
$j(active).removeClass('active');
$j(next).fadeIn().addClass('active');
});
}
$j(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/wp-includes/js/jquery/image-on-time.js"></script>