如何将动画元素绑定到幻灯片导航

Question

我有一个带导航的图像幻灯片，我想添加一个动画元素来突出显示活动幻灯片，使用箭头图形，随着幻灯片的旋转，箭头图形会移动到活动幻灯片。我使用的是jQuery Cycle插件，它将"activeSlide"类添加到相关的幻灯片编号中，我正试图使最终结果类似于上面的滑块http://offerpop.com/，箭头可自动移动活动幻灯片，也可在单击时移动。

我一直在尝试遵循这个线程中似乎相同的目标：如果$（element）hasClass，那么.animate（）不工作？但到目前为止，根据这个线程的建议，我还没有让它发挥我想要的功能。

因此，如果有人能帮助我，并为我指明正确的方向，我将不胜感激，因为我真的不知道从哪里开始。感谢

这是代码的导航部分：

<div id="nav">
    <div id="navitem" class="activeSlide"><a>1</a></div>
    <div id="navitem"><a>2</a></div>
    <div id="navitem"><a>3</a></div>
    <div id="navitem"><a>4</a></div>
    <div id="navitem"><a>5</a></div>
</div>
<div id="nav"></div>    
<div id="arrow"></div>​
<script type="text/javascript">
$(document).ready(function() {  
if($('#navitem').hasClass("activeSlide")){
       $("#arrow").animate({marginLeft:"100px"}, 500);
   };
});
</script>

Answer 1

我已经为您制作了一个工作版本，并附有解释一切工作原理的注释。我还纠正了HTML中的一些错误（多个元素不能有相同的ID）。以下是JSfiddle：http://jsfiddle.net/e6r2e/1/.

HTML：

<div id="nav">
    <div id="1" class="navitem activeSlide"><a>1</a></div>
    <div id="2" class="navitem"><a>2</a></div>
    <div id="3" class="navitem"><a>3</a></div>
    <div id="4" class="navitem"><a>4</a></div>
    <div id="5" class="navitem"><a>5</a></div>
</div>
<div id="arrow"></div>​

CSS：

.navitem{
    display:block;
    float:left;
    padding:10px 30px;
    cursor:pointer;
}   
.activeSlide{
    background:#ccc;
}
.activeSlide a{
    color:red;
}
#arrow{
    width:10px;
    height:10px;
    background:black;
    position:absolute;
    margin-top:40px;
    left:30px;
}    ​

JavaScript：

$(document).ready(function() {
    var slideX = [30, 98, 166, 234, 302], //Define the x-position of the arrow for each slide
        currentSlide = 0; //Current slide variable. Change this to change starting slide.
    //Function to change slides. Accepts one parameter, the slide's jQuery object:
    function changeSlide(slide) {
        $('.activeSlide').removeClass('activeSlide'); //Remove previous slide's activeSlide class
        $(slide).addClass('activeSlide'); //Add activeSlide class to current slide.
        $('#arrow').clearQueue().animate({ //Animate the arrow to the correct location. clearQueue is used so that animations aren't stacked:
            'left': slideX[currentSlide] + 'px' //Animate the 'left' selector (Better than margin-left).
        }, 300); //Animation duration in milliseconds.
    }
    //Rotate through slides:
    rotate = setInterval(function() {
        //Check if we're on the last slide; if so, return to 0:
        if (currentSlide + 1 >= slideX.length) {
            currentSlide = 0;
        } else {
            currentSlide++;
        }
        //Call the changeSlide function with the slide's jQuery object as the parameter.
        changeSlide($('#' + (currentSlide + 1)));
    }, 5000); //Duration to stay on each slide in milliseconds.
    //Animate to clicked slide:
    $('.navitem').click(function() {
        currentSlide = $(this).attr('id') - 1; //Change currentSlide variable to the slide clicked. We use the slide's ID to determine which slide it is, and then subtract one since we deal with numbers starting at 0, not 1.
        changeSlide($(this)); //Call changeSlide function with the new slide's jQuery object as the parameter.
        //Clear and restart our rotate interval so that the timer is reset. Otherwise if we clicked a slide with 1 second left on the timer, it would rotate again in 1 second instead of 5:
        clearInterval(rotate);
        rotate = setInterval(function() {
            if (currentSlide + 1 >= slideX.length) {
                currentSlide = 0;
            } else {
                currentSlide++;
            }
            changeSlide($('#' + (currentSlide + 1)));
        }, 5000);
    });
});​

Answer 2

如果是我，我会使用setInterval（）调用您已经编写的代码。类似这样的东西：

function moveArrow()
{
    position_of_currently_active_slide = $(".activeSlide").index("#nav > div");
    margin_based_on_active_slide = (position+1)*30; // +1 because position is 0 indexed
    $("#arrow").animate({marginLeft:margin+"px"}, 500);
}
$(document).ready(function() {  
    setInterval(moveArrow, 900);
});​

这样，总是有一些东西在寻找带有"activeSlide"的div。AFAIK，没有"jquery方式"可以做到这一点。

请注意：您仍然需要修改您的代码，以计算哪张"幻灯片"是活动的+移动它还有多少余量。