首先,我想说我是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);
}
));
当它不起作用时,我改变了它,看看我是否能到达下一个锚对象:
$(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"
最后一个问题(再次,很抱歉发了这么长的帖子):为什么这对主播不起作用,但对李和IMG起作用?"a:first"可以很好地工作,但将".next"链接到它不会。我做错什么了吗?此外,我是在沿着正确的道路创建一个具有导航效果的滑块,还是让自己陷入兔子洞?提前感谢任何帮助我的人,不要一看到我的长文和过度解释就逃跑。
问题在于锚标记之间的"br"标记。最快的解决方案是:
$('.moonslidelinks a:first').animate({color: "#0083ff"}, 3000).next().next().animate({color: "#FFF"}, 3000);
请注意,您需要调用"next().next()"来获得"br",然后是"a"。
在此处查看所选答案:在jQuery 中获取下一个同级的最干净方法
下一个要锚定的元素是没有id的<br />
标记。无论是否向.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
以下是我到目前为止得到的结果。这里的两个答案都是正确的,指定"next('a')"不仅仅是为了寻找锚。Ryan Henderson关于使用"next().next()"的建议起到了下一个锚的作用。实际上,我最终还是放弃了在导航端使用"next()"。正如你在我的原始文章中看到的那样,我通过取出第一个图像并将其附加到div的末尾来旋转图像。这样,代码每次运行时都可以简单地获取div中的第一个图像。我不确定这是否是最好的方法,但正如我所说,我只是在努力学习(这就是我当时想到的)。正因为如此,我不必担心(图片)会排在列表的最后。当我用"next().next()"编写好代码时,我意识到它不起作用,因为我确实要担心导航列表的末尾。在导航端使用"next()"将使我到达结尾,然后在第一个动画回滚时跳过它。我最终使用了以下方法,这可能是也可能不是最好的解决方案:
JS-
$(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);
}
));
我想对这个脚本做的下一件事是放入一些鼠标悬停暂停。我不太确定从哪里开始,但我明天会开始深入研究。我最初的问题得到了上面两个回复的回答,所以我认为这个问题已经解决了(再次感谢你们!)。这是我用于测试的完整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>