Question

我制作了一个自定义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);

    });
});

Answer 1

也许您需要先将所有.marquee_caption元素发送回原始位置，然后只将所选元素放入视图中。

类似的东西：

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

其中navClick是代码中已存储的变量，用于存储所选导航元素的.index()。 .eq()是将navClick值传递给。{/ p>的jQuery方法

以下是修改后的 jsFiddle ，为了简单起见，使用您自己的代码作为示例。

希望这就是你要找的东西。

<强> 更新

jQuery的 .eq() 方法使用index参数从一组元素中仅检索一个元素。
.not() 方法会选择所有内容，但传递给它的选择器规则。
因此，在上面的第一行中，我们选择了所有元素，除了当前 3 .marquee_caption元素根据{{1}} 索引选择一个。因此，生成的jQuery对象包含 3个元素中的2个。然后我们像往常一样navClick。
最后，您只需使用相同的.animate()方法触发相应click元素上的.marquee_nav_item事件，即在.eq()函数关闭之前，添加以下内容： $(document).ready(...)。
顺便提一句，这是其中一个选项，也许是最快最肮脏的选择。发生的事情是您手动触发点击事件，因此，上面$('.marquee_nav .marquee_nav_item').eq(0).trigger('click');函数中定义的所有内容都会跟随。

Answer 2

//animation the caption
$(this).parents('.slide').find('.marquee_caption').animate({'top':275}, 500);

这是你的意思吗？

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

2 个答案: