Javascript 使用Jquery滑块获取下一个锚点对象时出现问题_Javascript_Jquery_Css_Slider_Anchor

Javascript 使用Jquery滑块获取下一个锚点对象时出现问题

javascript jquery css

Javascript 使用Jquery滑块获取下一个锚点对象时出现问题,javascript,jquery,css,slider,anchor,Javascript,Jquery,Css,Slider,Anchor,（很抱歉，我的帖子太长了。我在解释事情时往往非常仔细。）首先，我想说我是Jquery新手，我正在尝试通过创建自定义图像滑块来自学。我让滑块本身处理淡入淡出效果，这段代码很好： Javascript: $(document).ready( $( $(function(){ $('.moonslide img:gt(0)').hide(); setInterval(function(){$('.moonslide img:first').fadeOut(30

（很抱歉，我的帖子太长了。我在解释事情时往往非常仔细。）

首先，我想说我是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

当它不起作用时，我更改了它，以查看我是否正在访问下一个锚对象：

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

最后一个问题（再一次，为这篇长文章感到抱歉）：为什么这对主播不起作用，但对李和IMG起作用？“a:first”很好用，但在其旁边链接a.next则不行。我做错什么了吗？此外，我是否正在沿着正确的路径创建具有导航效果的滑块，还是我将自己送入兔子洞？提前感谢任何对此提供帮助的人，不要一看到我的长篇文章就跑掉，也不要过度解释。

下一个要锚定的元素是没有id的

标记。

.next（）

方法只返回它旁边的元素，不管你是否向它传递了参数

<div id="linkul" class="moonslidelinks">
    <a href="#" id="ml0">Slide 1</a><br />
    ------------------------------- ------
                   |                  |
          Selects this first     The Next to it.
                   |                  |
        $('.moonslidelinks a:first').next('a')
                                         -----
                                           |
                                     It will not help




------------------------------- ------
|                  |
选择它旁边的第一个。
|                  |
$（'.moonslidelinks a:first'）。next（'a'））
-----
|
这没用

问题在于锚定标记之间的“br”标记。最快的解决方案是：

$('.moonslidelinks a:first').animate({color: "#0083ff"}, 3000).next().next().animate({color: "#FFF"}, 3000);

注意，您需要调用“next（）.next（）”来获取“br”，然后是“a”

在这里查看所选答案：

这是我到目前为止得到的答案。这里的两个答案都是正确的，因为指定“next（'a'）”不仅仅查找锚。Ryan Henderson关于使用“next（）.next（）”的建议有效地解决了下一个问题。无论如何，我最终还是放弃了在导航端使用“next（）”。正如您在我的原始帖子中看到的，我通过取出第一个图像并将其附加到div的末尾来旋转图像。这样，每次运行时，代码都可以简单地抓取div中的第一个图像。我不确定这是否是最好的方法，但正如我所说的，我只是想学习这个（这就是我当时想到的）。正因为如此，我不必担心列表的末尾（图片）。当我使用“next（）.next（）”将代码准备就绪时，我意识到它不会起作用，因为我确实需要担心导航列表的末尾。在导航端使用“next（）”将结束，然后在第一个动画回滚时跳过它。我最终使用了以下方法，这可能是最好的解决方案，也可能不是：

$（文档）。准备好了吗($(
函数（）{
$（'.moonslide img:gt（0）'）.hide（）；
$（'.moonslidelinks a:first'）.css（“颜色”，“FFF”）；
setInterval（函数（）{
var curClass=$（'.moonslide img:first'）.attr（'id'）；
var sp=curClass.split（'ms'）；
var curIndex=parseInt（sp[1]）；
变量linkID='ml'+curIndex；
if（curIndex<$（'.moonslide'）.find（'img'）.length-1）{var nextID='ml'+（curIndex+1）；}
else{var nextID='ml0'；}
$（'.moonslide img:first'）.fadeOut（3000.next（'img'）.fadeIn（3000.end（））.appendTo（'.moonslide'）；
$（“#”+linkID）.animate（{color:#0083ff“}，3000）；
$（“#”+nextID）.animate（{color:“#FFF”}，3000）；
}, 6000);
}
));

我想对这个脚本做的下一件事是在鼠标悬停时进行一些操作。我不太确定从哪里开始，但我明天会开始深入研究。我最初的问题得到了上面两个回复的回答，所以我认为这个问题已经解决了（再次感谢你们两位！）。这是我用于测试的完整HTML页面。这包括所有的CSS、HTML和Javascript。如果你注意到任何我可以做得更好的事情，我总是乐于接受建议

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
a:link{color: #0083ff;}
a:active{color:#0083ff;}
a:visited{color:#0083ff;}
a:hover{color:#0083ff;}
.slimage {
    width: 650px;
    height: 410px;
}
.moonslide {
    position:relative;
    width: 650px;
    height: 410px;
}
.moonslide img{
    position:absolute;
    z-index: -1000;
}
.moonslidelinks a{
    font-size: 1.8em;
    text-decoration: none;
}
#viewport {
    margin: auto;
    width: 1024px;
    height: 800px;
    position: relative;
    background-color: #000;
}
#topslider {

    position: relative;
    top: 25px;
    left: 37px;
    height: 420px;
    width: 950px;
    z-index: 10;
}
#MoonslideNav {
    top: 235px;
    left: 675px;
    width: 150px;
    height: 160px;
    position: absolute;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Jquery 1.10.2 //-->
<script src="//code.jquery.com/color/jquery.color-2.1.2.js"></script> <!-- Jquery Color Plugin //-->
<script type="text/javascript">
$(document).ready($(
    function(){

        var fadeTime = 3000; // Time it takes to fade in and out in ms.
        var intTime = 6000; // Time before the next image effect starts in ms(counter starts as soon as fade in begins). 


        $('.moonslide img:gt(0)').hide();
        $('.moonslidelinks a:first').css("color","#FFF");
        setInterval(function(){
            var curID = $('.moonslide img:first').attr('id'); // Get first image (current image) ID
            var sp = curID.split('ms'); // Split first part of ID to leave only index number in sp[1]
            var curIndex = parseInt(sp[1]); // turn index number string into integer 
            var linkID = 'ml' + curIndex; // create string for current link ID
            if (curIndex < $('.moonslide').find('img').length-1) // Make sure current index is not the last image. 
            {var nextID = 'ml' + (curIndex+1);} // If it isn't, next index = current index + 1
            else {var nextID = 'ml0';} // If it is, next index = first link ID
            $('.moonslide img:first').fadeOut(fadeTime).next('img').fadeIn(fadeTime).end().appendTo('.moonslide');   // First Image Fade Out -> Next Image Fade In -> Move first Image to end
            $("#"+linkID).animate({color: "#0083ff"}, fadeTime); // Fade current navigation link out
            $("#"+nextID).animate({color: "#FFF"}, fadeTime); // Fade next navigation link in
        }, intTime); // Repeat after 6 seconds (includes the 3 seconds it takes to fade out / in). 
    }
));
</script>
</head>

<body>

<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 id="MoonslideNav" 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>
</div>
</body>
</html>


答：链接{颜色：#0083ff；}
a:活动{颜色：#0083ff；}
答：访问{color:#0083ff；}
a:悬停{颜色：#0083ff；}
1.减肥{
宽度：650px；
高度：410像素；
}
.月球滑坡{
位置：相对位置；
宽度：650px；
高度：410像素；
}
.月球幻灯片{
位置：绝对位置；
z指数：-1000；
}
.月亮女神{
字号：1.8em；
文字装饰：无；
}
#视区{
保证金：自动；
宽度：1024px；
高度：800px；
位置：相对位置；
背景色：#000；
}
#上滑道{
位置：相对位置；
顶部：25px；
左：37像素；
高度：420px；
宽度：950px；
z指数：10；
}
#穆斯莱德纳夫{
顶部：235px；
左：675px；
宽度：150px；
高度：160px；
位置：绝对位置；
}
$（文件）。准备好了吗($(
函数（）{
var fadeTime=3000；//淡入淡出所需的时间（毫秒）。
var intTime=6000；//下一个图像效果开始前的时间（以毫秒为单位）（淡入开始后计数器立即开始）。
$（'.moonslide img:gt（0）'）.hide（）；
$（'.moonslidelinks a:first'）.css（“颜色”，“FFF”）；
setInterval（函数（）{
var curID=$（'.moonslide img:first'）.attr（'id'）；//获取第一个图像（当前图像）id
var sp=curID.split（'ms'）；//分割ID的第一部分，在sp[1]中只留下索引号
var curIndex=parseInt（sp[1]）；//将索引号字符串转换为整数
var linkID='ml'+curIndex；//为当前链接ID创建字符串
if（curIndex<$（'.moonslide'）.find（'img'）.length-1）//确保当前索引不是最后一个图像。
{var nextID='ml'+（curIndex+1）；}//如果不是，则下一个索引=当前索引+1
else{var nextID='ml0'；}//If
<div id="linkul" class="moonslidelinks">
    <a href="#" id="ml0">Slide 1</a><br />
    ------------------------------- ------
                   |                  |
          Selects this first     The Next to it.
                   |                  |
        $('.moonslidelinks a:first').next('a')
                                         -----
                                           |
                                     It will not help

$('.moonslidelinks a:first').animate({color: "#0083ff"}, 3000).next().next().animate({color: "#FFF"}, 3000);

$(document).ready($(
function(){

    $('.moonslide img:gt(0)').hide();
    $('.moonslidelinks a:first').css("color","#FFF");

    setInterval(function(){
        var curClass = $('.moonslide img:first').attr('id');
        var sp = curClass.split('ms');
        var curIndex = parseInt(sp[1]);
        var linkID = 'ml' + curIndex;
        if (curIndex < $('.moonslide').find('img').length-1) {var nextID = 'ml' + (curIndex+1);}
        else {var nextID = 'ml0';}

        $('.moonslide img:first').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.moonslide');   
        $("#"+linkID).animate({color: "#0083ff"}, 3000);
        $("#"+nextID).animate({color: "#FFF"}, 3000);

    }, 6000);

}

));

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
a:link{color: #0083ff;}
a:active{color:#0083ff;}
a:visited{color:#0083ff;}
a:hover{color:#0083ff;}
.slimage {
    width: 650px;
    height: 410px;
}
.moonslide {
    position:relative;
    width: 650px;
    height: 410px;
}
.moonslide img{
    position:absolute;
    z-index: -1000;
}
.moonslidelinks a{
    font-size: 1.8em;
    text-decoration: none;
}
#viewport {
    margin: auto;
    width: 1024px;
    height: 800px;
    position: relative;
    background-color: #000;
}
#topslider {

    position: relative;
    top: 25px;
    left: 37px;
    height: 420px;
    width: 950px;
    z-index: 10;
}
#MoonslideNav {
    top: 235px;
    left: 675px;
    width: 150px;
    height: 160px;
    position: absolute;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Jquery 1.10.2 //-->
<script src="//code.jquery.com/color/jquery.color-2.1.2.js"></script> <!-- Jquery Color Plugin //-->
<script type="text/javascript">
$(document).ready($(
    function(){

        var fadeTime = 3000; // Time it takes to fade in and out in ms.
        var intTime = 6000; // Time before the next image effect starts in ms(counter starts as soon as fade in begins). 


        $('.moonslide img:gt(0)').hide();
        $('.moonslidelinks a:first').css("color","#FFF");
        setInterval(function(){
            var curID = $('.moonslide img:first').attr('id'); // Get first image (current image) ID
            var sp = curID.split('ms'); // Split first part of ID to leave only index number in sp[1]
            var curIndex = parseInt(sp[1]); // turn index number string into integer 
            var linkID = 'ml' + curIndex; // create string for current link ID
            if (curIndex < $('.moonslide').find('img').length-1) // Make sure current index is not the last image. 
            {var nextID = 'ml' + (curIndex+1);} // If it isn't, next index = current index + 1
            else {var nextID = 'ml0';} // If it is, next index = first link ID
            $('.moonslide img:first').fadeOut(fadeTime).next('img').fadeIn(fadeTime).end().appendTo('.moonslide');   // First Image Fade Out -> Next Image Fade In -> Move first Image to end
            $("#"+linkID).animate({color: "#0083ff"}, fadeTime); // Fade current navigation link out
            $("#"+nextID).animate({color: "#FFF"}, fadeTime); // Fade next navigation link in
        }, intTime); // Repeat after 6 seconds (includes the 3 seconds it takes to fade out / in). 
    }
));
</script>
</head>

<body>

<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 id="MoonslideNav" 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>
</div>
</body>
</html>