So binden Sie ein animiertes Element an eine Diashow-Navigation

Question

Ich habe eine Bildpräsentation mit Navigation, mit der ich ein animiertes Element hinzufügen möchte, um die aktive Folie zu markieren. Dabei wird eine Pfeilgrafik verwendet, die sich zur aktiven Folie bewegt . Ich benutze das jQuery Cycle-Plugin, das die 'activeSlide'-Klasse zu der relevanten Foliennummer hinzufügt und ich versuche, das fertige Ergebnis zu erhalten, so wie der Schieberegler auf http://offerpop.com/, wo der Pfeil die aktive Folie automatisch bewegt, als sowie beim Klick.

Ich habe versucht zu folgen, was scheint das gleiche Ziel von diesem Thread zu sein: If $(element) hasClass then .animate() not working? aber bis jetzt habe ich es nicht zu funktionieren, wie ich möchte, basierend auf den Vorschlägen dieses Threads.

So wäre ich dankbar, wenn mir jemand helfen könnte und mir in die richtige Richtung zeigen würde, auf welche Methode ich gehen würde, da ich nicht wirklich weiß, wo ich anfangen soll. Dank

Hier ist die Navigation Teil des Codes:

<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

Ich habe eine Arbeitsversion für Sie erstellt, komplett mit Kommentaren, die erklären, wie alles funktioniert. Ich habe auch einige Fehler in Ihrem HTML korrigiert (mehrere Elemente können nicht die gleiche ID haben.) Hier ist die 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

Wenn dies mir war, habe ich eine setInterval verwenden würde(), um den Code rufen Sie bereits geschrieben haben. Etwas wie folgt aus:

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

Auf diese Weise ist es etwas, immer für das div Suche mit „Activeslide“. AFAIK, es gibt keinen "jquery-way", um das zu tun.

Bitte beachten Sie: Sie müssen noch Ihren Code ändern, um herauszufinden, welcher "Slide" aktiv ist + wie viel Spielraum übrig ist, um ihn zu verschieben.