Как привязать анимированный элемент к навигации по слайд-шоу - PullRequest
Новая
       26

Как привязать анимированный элемент к навигации по слайд-шоу

1 голос
/ 26 марта 2012

У меня есть слайд-шоу изображений с навигацией, с помощью которого я хочу добавить анимированный элемент для выделения активного слайда, используя изображение стрелки, которое перемещается к активному слайду при вращении слайд-шоу.Я использую плагин 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>

Ответы [ 2 ]

1 голос
/ 26 марта 2012

Я сделал для вас рабочую версию с комментариями, объясняющими, как все работает.Я также исправил некоторые ошибки в вашем HTML (несколько элементов не могут иметь одинаковый идентификатор.) Вот 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);

    });
});​
0 голосов
/ 26 марта 2012

Если бы это был я, я бы использовал 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);
});​

Таким образом, всегда есть что-то, ищущее div с помощью activeSlide.AFAIK, для этого нет «способа jquery».

Обратите внимание: Вам все еще нужно изменить свой код, чтобы выяснить, какой "слайд" активен + сколько осталось полей для его перемещения.

...