gpt4 book ai didi

jquery - 使用wordpress按时间间隔和将鼠标悬停在链接上时更改图像

转载 作者:太空宇宙 更新时间:2023-11-03 19:02:01 25 4
gpt4 key购买 nike

我想问一下如何让图像按时间间隔更改(比如说 5 秒后),并且这些相同的图像会根据链接的悬停而变化(类似于 www.gamespot.com 等网站)。我有这些链接:

<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>

好的,到目前为止我已经设法创建了这个:所以 jquery 看起来像这样:

function swapImages(){
var $active = $('#gallery1 .active');
var $next = ($('#gallery1 .active').next().length > 0) ? $('#gallery1 .active').next() : $('#gallery1 img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
}

我将我的 .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*/

CSS 样式:

#gallery1{
float:right;
width:400px;
height:300px;
}
#gallery1 img{
display:none;
position:absolute;

}
#gallery1 img.active{
display:block;
}

我页面上的 html 语法:

<div id="gallery1">
<article>
<img src="img1.jpg" class="active"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
</article>

所以在这样做之后,第一张图片出现,没有其他事情发生。是我在加载 .js 文件时做错了什么还是其他什么地方出了问题?


所以我读到,jquery 可能会通过使用“$”与其他脚本发生冲突。所以我改变了这样的功能:

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);
});

我什至改变了 .js 的调用方式:

 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/wp-includes/js/jquery/image-on-time.js"></script>

但什么都没有改变.. 谁能告诉我我做错了什么?..所以没有人对wordpress有所了解吗?

最佳答案

使用“jQuery”一词代替 $ 符号,并调用 jQuery.noConflict();

关于jquery - 使用wordpress按时间间隔和将鼠标悬停在链接上时更改图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11754934/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com