我制作了一个自定义的 jquery 幻灯片，它按要求工作。唯一剩下的就是为幻灯片中的标题设置动画。我希望字幕响应当前幻灯片，但问题是无论显示哪张幻灯片，所有字幕都会响应。我似乎无法解决这个问题。
<body>
<div class="marquee_container">
<div class="holder">
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
<div class="marquee_nav">
</div>
</div>
</body>
</html>
CSS
.marquee_container {
width: 700px;
height: 350px;
overflow: hidden;
margin: 0px 0px 30px 0px;
padding: 0px;
position:relative;
}
.holder{
overflow: hidden;
position: relative;
width: 9999px;
height: 350px;
}
.slide{
width: 700px;
float: left;
position:relative;
}
.marquee_photos {
overflow:hidden;
}
.marquee_photos img{
display:block;
}
.marquee_caption {
width: 700px;
margin: 0px;
padding: 15px 0px 10px 0px;
color: #fff;
position: absolute;
top: 350px;
left: 0px;
background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
width: 410px;
padding: 0px 0px 0px 25px;
}
.marquee_nav{
position:absolute;
bottom:5px;
right:0;
}
.marquee_nav .marquee_nav_item{
color:#fff;
text-decoration:none;
background:url(images/template/nav_buttons.png) no-repeat;
text-indent:-9999px;
overflow:hidden;
display:block;
width:17px;
height:18px;
float:left;
margin:0 4px;
}
.marquee_nav .marquee_nav_item:hover{
background:url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item.selected{
background:url(images/template/nav_buttons.png) no-repeat -50px 0;
}
JQUERY
$(document).ready(function(){
//1st STEP
//generating nav links automatically
//for each slide there should be a nav item
$('.slide').each(function(index, value){
$('.marquee_nav').append('<a href="#" class="marquee_nav_item"></a>');
});
//2nd STEP
//setting the nav links and running the slide
$('.marquee_nav .marquee_nav_item').on('click', function(){
$('.marquee_nav_item').removeClass('selected');
$(this).addClass('selected');
//3rd STEP
//animating the slideshow
//getting the index value of the clicked nav
var navClick = $(this).index();
/* holder width set to the parent width because the holder width is 9999px and we will use that to change
the margin-left position of the images */
var holderWidth = $('.marquee_container').width();
/* position of the new img according to the nav item clicked. If the 3 nav item is clicked jquery will get that
index value and will multiply it with the holder width to know how much distance it has to move for eg.
if the 2nd nav is clicked, the index is 1, so 1 * with the holderWidth which is 700 = 700. So it will move margin-left
-700px. See the animate function below */
var photoPosition = navClick * holderWidth;
//alert(photoPosition);
//slideshow animation
$('.marquee_container .holder').animate({'margin-left' : -photoPosition}, 1000);
//animating the caption
$('.marquee_caption').animate({'top':275}, 500);
});
});
最佳答案
也许您需要先发送所有 .marquee_caption元素返回到它们的原始位置，然后仅将选定的元素带入 View 。
类似于:
...
$('.marquee_caption').not(':eq(' + navClick + ')').animate({ 'top': 200 }, 500);
$('.marquee_caption').eq(navClick).animate({ 'top': 100 }, 500);
...
哪里navClick是您的代码中已有的变量，它存储 .index()所选导航元素的。和 .eq()是你传递给这个 navClick 的 jQuery 方法吗？值(value)转化。
这是修改后的 jsFiddle 作为示例，为简单起见使用您自己的代码。
希望这就是您要找的。
更新:
-
.eq()jQuery 的方法接受index。仅检索一组元素中的一个元素的参数。 -
.not()方法选择传递给它的选择器规则除外的所有内容。 - 所以在上面的第一行中，3
.marquee_caption元素，我们根据navClick选择所有元素除了当前选择的元素索引。因此生成的 jQuery 对象包含 3 个中的 2 个 元素。然后我们.animate()他们像往常一样。 - 最后，您可以简单地触发
click各自的事件.marquee_nav_item利用相同的元素.eq()方法，即就在你的$(document).ready(...)之前功能关闭，添加:$('.marquee_nav .marquee_nav_item').eq(0).trigger('click');. - 顺便说一句，这是其中一个选项，而且可能是最快和最脏的。正在发生的事情是您手动触发点击事件，因此一切都在
click中定义。上面的功能，如下。
关于javascript - 如何分别为每张幻灯片制作标题动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31771704/