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

Question

我有一个带导航的图像幻灯片，我希望添加一个动画元素以突出显示活动幻灯片，使用箭头图形随幻灯片旋转移动到活动幻灯片。我正在使用jQuery Cycle插件，它将'activeSlide'类添加到相关的幻灯片编号中，我试图让最终结果成为http://offerpop.com/上的滑块，其中箭头将自动移动活动幻灯片，如同以及点击。

我一直在试图从这个线程似乎是相同的目标：If $(element) hasClass then .animate() not working?，但到目前为止，我没有得到它的功能，因为我想，根据这个线程的建议。

所以，如果有人能够帮助我，并指出我的方向是正确的方向，我将不胜感激，因为我真的不知道从哪里开始。由于

下面的代码的导航部分：

<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方式”来做到这一点。

请注意：您仍然需要修改您的代码，以确定哪个“幻灯片”处于活动状态，剩下多少余量才能将其移动。