（我很抱歉发了这么长的帖子。我在解释事情时往往非常透彻。）
首先，我想说我是 Jquery 的新手，我正在尝试通过创建自定义图像滑块来自学。我让滑块本身可以使用以下代码处理淡入淡出效果：
Javascript：
$(document).ready(
$(
$(function(){
$('.moonslide img:gt(0)').hide();
setInterval(function(){$('.moonslide img:first').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.moonslide');}, 6000);
})
));
HTML
<div id="viewport">
<div id="topslider">
<div class="moonslide">
<img src="/images/Slider/filer.jpg" class="slimage" id="ms0">
<img src="/images/Slider/greenroom.jpg" class="slimage" id="ms1">
<img src="/images/Slider/ng1.png" class="slimage" id="ms2">
<img src="/images/Slider/ngs.png" class="slimage" id="ms3">
<img src="/images/Slider/worldworks.jpg" class="slimage" id="ms4">
</div>
</div>
<div id="linkul" class="moonslidelinks">
<a href="#" id="ml0">Slide 1</a><br />
<a href="#" id="ml1">Slide 2</a><br />
<a href="#" id="ml2">Slide 3</a><br />
<a href="#" id="ml3">Slide 4</a> <br />
<a href="#" id="ml4">Slide 5</a><br />
</div>
</div>
我想尝试的下一件事是用它为导航列表设置动画。我开始尝试的第一件事是在显示相应的图像时简单地将链接颜色从蓝色淡化为白色（我已经添加了 Jquery 颜色插件来动画 css）。我假设为每个动作添加两个效果需要我打破我为淡入淡出效果准备的链条。我开始只是确保我可以正确地分解它。到目前为止，我想我知道我需要如何分解它，但是在“a：first”之后我无法获得下一个锚对象。我编写了以下代码，适用于第一个和第二个图像以及第一个锚点，但不适用于第二个锚点。
$(document).ready($(
function(){
$('.moonslide img:gt(0)').hide();
$('.moonslidelinks a:first').css("color","#FFF");
$('.moonslide img:first').fadeOut(3000).next('img').fadeIn(3000);
$('.moonslidelinks a:first').animate({color: "#0083ff"}, 3000).next('a').animate({color: "#FFF"}, 3000);
}
));
当它不起作用时，我对其进行了更改以查看是否可以到达下一个 Anchor 对象：
$(document).ready($(
function(){
var nextImg = $('.moonslide img:first').next('img');
var nextA = $('.moonslidelinks a:first').next('a');
console.log(nextImg.attr('id'));
console.log(nextA.attr('id'));
}
));
这将第二张图像的 ID 输出到控制台就好了，但显示未定义的锚。
[00:02:11.080] "ms1"
[00:02:11.080] undefined
如果我在导航中添加一个列表并尝试获取下一个“li”ID，它就可以正常工作。
$(document).ready($(
function(){
var nextImg = $('.moonslide img:first').next('img');
var nextA = $('.moonslidelinks li:first').next('li');
console.log(nextImg.attr('id'));
console.log(nextA.attr('id'));
}
));
<ul class="moonslidelinks">
<li id="li0"><a href="#" id="0">Slide 0</a></li>
<li id="li1"><a href="#" id="1">Slide 1</a></li>
<li id="li2"><a href="#" id="2">Slide 2</a></li>
<li id="li3"><a href="#" id="3">Slide 3</a></li>
<li id="li4"><a href="#" id="4">Slide 4</a></li>
</ul>
输出：
[00:07:36.031] "ms1"
[00:07:36.031] "li1"
最后一个问题（再一次，很抱歉，很长的帖子）：为什么这对主播不起作用，但对 LI 和 IMG 起作用？"a:first" 工作得很好，但将 ".next" 链接到它就不行了。难道我做错了什么？另外，我是在走正确的道路来创建带有导航效果的滑块，还是我把自己送进了兔子洞？提前感谢任何对此提供帮助的人，并且在看到我的长篇文章和过度解释时不会逃跑。