如何为每张幻灯片单独设置标题动画

How to animate the caption for each slide individually

本文关键字：单独 设置 标题 动画 幻灯片      更新时间：2023-09-26

我制作了一个自定义的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元素发送回其原始位置，然后只将选定的元素带入视图。

类似于：

...
$('.marquee_caption').not(':eq(' + navClick + ')').animate({ 'top': 200 }, 500);
$('.marquee_caption').eq(navClick).animate({ 'top': 100 }, 500);
...

其中navClick是代码中已经存在的变量，用于存储所选导航元素的.index()。.eq()是您将这个navClick值传递到的jQuery方法。

为了简单起见，这里有一个经过修改的jsFiddle示例，使用您自己的代码。

希望这就是你想要的。

更新：

  • jQuery的.eq()方法使用index参数从一组元素中仅检索一个元素
  • .not()方法选择除传递给它的选择器规则之外的所有
  • 因此，在上面的第一行中，在3.marquee_caption元素中，我们将根据navClick索引选择除当前所选元素外的所有元素。因此，生成的jQuery对象包含3个元素中的2个。然后我们像往常一样.animate()他们
  • 最后，您可以使用相同的.eq()方法在相应的.marquee_nav_item元素上简单地触发click事件，即在$(document).ready(...)函数关闭之前，添加以下内容：$('.marquee_nav .marquee_nav_item').eq(0).trigger('click');
  • 顺便说一句，这可能是最快、最脏的选择之一。发生的情况是，您正在手动触发点击事件，因此上面click函数中定义的一切如下
//animation the caption
$(this).parents('.slide').find('.marquee_caption').animate({'top':275}, 500);

这就是你的意思吗？

相关文章：