如何將動畫元素綁定到幻燈片導航

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方式」來做到這一點。

請注意：您仍然需要修改您的代碼，以確定哪個「幻燈片」處於活動狀態，剩下多少餘量才能將其移動。