jQuery содержит слайдер с анимацией для каждого слайда - PullRequest
Новая
       29

jQuery содержит слайдер с анимацией для каждого слайда

2 голосов
/ 25 января 2012

Я создаю слайдер с содержимым функций, используя jQuery, и я столкнулся с несколькими трудностями, пытаясь избавиться от последних нескольких ошибок.Он вдохновлен http://kleientertainment.com/, так что проверьте его, и вы увидите, к чему я иду.Любые предложения по достижению этого эффекта даже с совершенно новым кодом были бы полезны!

Идея - простой обмен div, но с настраиваемой анимацией для каждого слайда, который запускается при загрузке.Он также ДОЛЖЕН постепенно переходить в черный цвет между каждым переходом, будь то автозапуск или нажатие.

позволяет перейти к коду и ошибкам: 

$(document).ready(function () {

//START SLIDES HIDDEN
$('.slide').css({
    'position': 'absolute',
    'display': 'none'
});

//RUN FIRST SLIDE
runSlideShow(1);
animation1_swap();

//AUTOPLAY FUNCTION
function runSlideShow(slideNumber) {
    $('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function () {

        if (slideNumber == 4) {
            animation1_swap();
            runSlideShow(1);
        }
        if (slideNumber == 3) {
            animation4_swap();
            runSlideShow(4);
        }
        if (slideNumber == 2) {
            animation3_swap();
            runSlideShow(3);
        }
        if (slideNumber == 1) {
            animation2_swap();
            runSlideShow(2);
        }
    });

    //NAVIGATION BUTTONS
    $('#bullet1').click(function () {
        $('.slide:visible').stop(true, true).fadeOut(1000, function () {
            animation1_swap();
            runSlideShow(1);
        });
    });
    $('#bullet2').click(function () {
        $('.slide:visible').stop(true, true).fadeOut(1000, function () {
            animation2_swap();
            runSlideShow(2);
        });
    });
    $('#bullet3').click(function () {
        $('.slide:visible').stop(true, true).fadeOut(1000, function () {
            animation3_swap();
            runSlideShow(3);
        });
    });
    $('#bullet4').click(function () {
        $('.slide:visible').stop(true, true).fadeOut(1000, function () {
            animation4_swap();
            runSlideShow(4);
        });
    });
}
});

Информация CSS: .slide устанавливает размеры, и #slideX - это отдельные фоновые изображения для каждого.#bulletX - это кнопки навигации.

Кроме того, animationX_swap () - это анимации, характерные для этого слайда.Они живут в другом файле и сделали бы этот пост слишком длинным.

Ошибки: Прямо сейчас, функция автопроигрывания великолепна, вы можете смотреть ее весь день и не видеть сбой.Проблема возникает, когда используются кнопки навигации, особенно # bullet1.Если я нажимаю # bullet1, затем перехожу к 2, а затем к 1, кажется, что автопроигрывание ускоряется, поскольку слайд исчезает раньше, чем это должно быть.Я абсолютный новичок, но я сделал это так далеко, может кто-нибудь помочь мне разобраться с этим и по существу переосмыслить слайдер http://kleientertainment.com/?

1 Ответ

0 голосов
/ 26 января 2012

Только что обнаруженный плагин цикла jQuery http://malsup.com/jquery/cycle/ из другого поста.

Я переделал свой слайдер, и он преформировался точно так, как нужно. Хорошие вещи!

...