Javascript 如何分别为每张幻灯片设置标题动画_Javascript_Jquery_Html_Css

Javascript 如何分别为每张幻灯片设置标题动画

javascript jquery html css

Javascript 如何分别为每张幻灯片设置标题动画,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我制作了一个自定义的jquery幻灯片，它可以根据需要工作。剩下的唯一一件事就是在幻灯片中设置标题动画。我希望标题对当前幻灯片做出响应，但问题是无论显示哪张幻灯片，所有标题都会做出响应。我似乎无法解决这个问题 <body> <div class="marquee_container"> <div class="holder"> <div class="slide"> &

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

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);

    });
});

$（文档）.ready（函数（）{
//第一步
//自动生成导航链接
//每张幻灯片都应该有一个导航项
$（'.slide'）。每个（函数（索引、值）{
$（'.marquee_nav'）。附加（''）；
});
//第二步
//设置导航链接并运行幻灯片
$（'.marquee\u nav.marquee\u nav\u item'）。在（'单击'，函数（）上）{
$（'.marquee_nav_item'）。removeClass（'selected'）；
$（this.addClass（'selected'）；
//第三步
//为幻灯片设置动画
//获取单击的导航的索引值
var navClick=$（this.index（）；
/*保持架宽度设置为父宽度，因为保持架宽度为9999px，我们将使用它来更改
图像的左边距位置*/
var holderWidth=$（'.marquee_container'）.width（）；
/*根据单击的导航项目确定新img的位置。如果单击了3导航项目，jquery将获得该位置
索引值，并将其与支架宽度相乘，以了解eg的移动距离。
如果单击第二个导航，则索引为1，因此保持宽度为700=700的1*将向左移动边距
-700px。请参见下面的动画功能*/
var photoPosition=navClick*holderWidth；
//警报（光电定位）；
//幻灯片动画
$（'.marquee_container.holder'）。动画（{'margin-left'：-photoPosition}，1000）；
//为标题设置动画
$（'marquee_caption'）。动画（{'top'：275}，500）；
});
});

这就是您的意思吗？

也许您需要首先将所有

.marquee\u caption

元素发送回其原始位置，然后仅将所选元素带到视图中

比如：

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

其中

navClick

是代码中已有的变量，用于存储所选导航元素的

.index（）

。而

.eq（）

是传递此

navClick

值的jQuery方法

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

希望这就是你想要的

更新：

jQuery的方法使用
```
索引
```
参数从一组元素中仅检索一个元素
方法选择除传递给它的选择器规则之外的所有内容
因此，在上面的第一行中，在3
```
.marquee_caption
```
元素中，我们根据
```
navClick
```
索引选择除当前所选元素之外的所有元素。因此，结果jQuery对象包含3个元素中的2个。然后我们像往常一样对它们进行
```
.animate（）
```
动画制作

最后，您只需使用相同的

.eq（）

方法，即在

$（文档）之前，在相应的.marquee\u nav\u项目上触发click
事件。就绪（…）
函数关闭后，添加以下内容：$（'.marquee\u nav.marquee\u nav\u item'）。eq（0）。触发器（'click'）


顺便说一句，这是一种选择，而且可能是最快和最脏的。发生的情况是，您正在手动触发click事件，因此上面的click
函数中定义的所有内容都会随之发生

不，我希望当前的幻灯片标题能够动画化，但问题是所有的标题都同时动画化。太棒了，这正是我想要的，非常感谢。你能更详细地解释一下这段代码吗？或者提供一些有用的链接。还有一件事。如何在页面加载时显示第一张活动幻灯片？现在，标题既不是活动的，也没有选择导航项添加上述更新。希望能有帮助。也读。
//animation the caption
$(this).parents('.slide').find('.marquee_caption').animate({'top':275}, 500);

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