Карусель с разделами и анимированные фоновые изображения


Я сделал карусель с разделами и анимированные фоновые картинки. Как я могу сделать код лучше и многоразовый? Сейчас работает с шириной всего 3 секции.

$(function () {
    var state = 0;
    var background = $(".selection-carousel .carousel-image"),
        buttonLeft = $(".selection-carousel .carousel-left"),
        buttonRight = $(".selection-carousel .carousel-right"),
        imageWidth = 1000,
        imageWidthMin = -1000,
        reelSize = 3,
        imageSum = $('.selection-carousel img').size(),
        maxPos = (imageSum - reelSize) * imageWidth;
    $(".selection-carousel section").hide();
    $(".selection-carousel section:first").show();
    $(".selection-carousel section:first").append(' <div class="steam"></div> ');

    // If ie8 than use drop shadow fallback
    if ($("html").hasClass("ie8")) {
        $(".selection-carousel section:first h2, .selection-carousel section:first p").dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
    }

    buttonLeft.hide();
    buttonRight.click(function (e) {
        e.preventDefault();
        var trigger = $('class'),
            maxPos = (imageSum - reelSize) * -imageWidthMin,
            image_reelPosition = (trigger === 'carousel-right') ? -imageWidth : imageWidth,
            reel_currentPosition = $('.carousel-image').css('left').replace('px', ''),
            pos = reel_currentPosition - image_reelPosition;
        $(".selection-carousel section:visible .steam").remove();
        if ($(background).is(':animated')) {
            $(background).is(':animated').stop();
        }
        background.animate({ left: "-=1000px" }, 1100, function () {
            $(".selection-carousel section:visible").fadeOut(300, function () {
                $(this).next().fadeIn(600, function () {
                    if ($("html").hasClass("textshadow")) {
                        $(this).append(' <div class="steam"></div> ');
                        createSteam();
                    }
                    if ($("html").hasClass("no-textshadow")) {
                        $("h2", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                        $("p", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                    }
                });
            });
        });
        state++;
        checkstate();
    });
    buttonLeft.click(function (e) {
        e.preventDefault();
        var trigger = $('class'),
            maxPos = (imageSum - reelSize) * -imageWidthMin,
            image_reelPosition = (trigger === 'carousel-right') ? -imageWidth : imageWidth,
            reel_currentPosition = $('.carousel-image').css('left').replace('px', ''),
            pos = reel_currentPosition - image_reelPosition;
        $(".selection-carousel section:visible .steam").remove();
        if ($(background).is(':animated')) {
            $(background).is(':animated').stop();
        }
        background.animate({ left: "+=1000px" }, 1100, function () {
            $(".selection-carousel section:visible").hide().prev().fadeIn(600, function () {
                if ($("html").hasClass("textshadow")) {
                    $(this).append(' <div class="steam"></div> ');
                    createSteam();
                }
                $(".dropShadow").remove();
                if ($("html").hasClass("no-textshadow")) {
                    $("h2", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                    $("p", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                }
            });
        });
        state--;
        checkstate();
    });
    function checkstate () {
        if  (state == 0) {
            if ($(".carousel-left").is(':visible'))
                if ($("html").hasClass("textshadow")) {
                    $(".carousel-left").fadeOut(600);
                } else {
                    $(".carousel-left").hide();
                }
        }
        else if (state == 1) {
              if ($(".carousel-left").is(':hidden'))
                 if ($("html").hasClass("textshadow")) {
                    $(".carousel-left").fadeIn('slow'); 
                 } else {
                     $(".carousel-left").show(); 
                 }

              if ($(".carousel-right").is(':hidden'))
                if ($("html").hasClass("textshadow")) {
                    $(".carousel-right").fadeIn(600);
                } else {
                    $(".carousel-right").show();
                }
        }
        else {
              if ($(".carousel-right").is(':visible'))
              if ($("html").hasClass("textshadow")) {
                 $(".carousel-right").fadeOut(600); 
              } else {
                   $(".carousel-right").hide(); 
              }
        }
    }
});


677
2
задан 31 октября 2011 в 08:10 Источник Поделиться
Комментарии
1 ответ

Некоторые небольшие советы могут быть:

Использовать плагин jQuery м расширение с нужным, создать/разрушить/функций/пред. См.: http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

Не злоупотребляйте селекторов

var background = $(".selection-carousel .carousel-image"),
buttonLeft = $(".selection-carousel .carousel-left"),
buttonRight = $(".selection-carousel .carousel-right"),

Может быть:

var selector = $('.selection-carousel'),
background = selector.children('.carousel-left'),
buttonLeft = selector.children('.carousel-left'),
buttonRight = selector.children('.carousel-right'),

Каждый раз, когда вы делаете его искать весь дом, он делает это медленнее/тяжелее в использовании.
(Ваш checksate также злоупотреблять).

Сделать несколько методов для плагина, так что вы можете создать карусели, уничтожать его, или отправить функции навигации (следующий/предыдущий/gotoId).

Просто небольшие советы :)

2
ответ дан 31 октября 2011 в 09:10 Источник Поделиться

Другие вопросы по теме
Объединить два массива классов
30 октября 2011 в 05:10
Как снизить нагрузку при выведении на несколько элементов в jQuery
30 октября 2011 в 12:10
На JavaScript холст анимация замедляется и коробления памяти
1 ноября 2011 в 09:11