• Добро пожаловать на компьютерный форум Tehnari.ru. Здесь разбираемся с проблемами ПК и ноутбуков: Windows, драйверы, «железо», сборка и апгрейд, софт и безопасность. Форум работает много лет, сейчас он переехал на новый движок, но старые темы и аккаунты мы постарались сохранить максимально аккуратно.

    Форум не связан с магазинами и сервисами – мы ничего не продаём и не даём «рекламу под видом совета». Отвечают обычные участники и модераторы, которые следят за порядком и качеством подсказок.

    Если вы у нас впервые, загляните на страницу о форуме и правила – там коротко описано, как задать вопрос так, чтобы быстро получить ответ. Чтобы создавать темы и писать сообщения, сначала зарегистрируйтесь, а затем войдите под своим логином.

    Не знаете, с чего начать? Создайте тему с описанием проблемы – подскажем и при необходимости перенесём её в подходящий раздел.
    Задать вопрос Новые сообщения Как правильно спросить
    Если пришли по старой ссылке со старого Tehnari.ru – вы на нужном месте, просто продолжайте обсуждение.

Автоматическая смена картинок в слайдере JS

Vasilisk

Новые
Регистрация
16 Май 2010
Сообщения
1,194
Реакции
12
Баллы
0
Автоматическая смена картинок в слайдере JS

Кто знает, подскажите пожалуйста.
Код:
(function(c, b, e) {
    var d = b.Modernizr;
    c.CBPFWSlider = function(f, g) {
        this.$el = c(g);
        this._init(f)
    };
    c.CBPFWSlider.defaults = {
        speed: 500,
        easing: "ease"
    };
    c.CBPFWSlider.prototype = {
        _init: function(f) {
            this.options = c.extend(true, {}, c.CBPFWSlider.defaults, f);
            this._config();
            this._initEvents()
        },
        _config: function() {
            this.$list = this.$el.children("ul");
            this.$items = this.$list.children("li");
            this.itemsCount = this.$items.length;
            this.support = d.csstransitions && d.csstransforms;
            this.support3d = d.csstransforms3d;
            var h = {
                    WebkitTransition: "webkitTransitionEnd",
                    MozTransition: "transitionend",
                    OTransition: "oTransitionEnd",
                    msTransition: "MSTransitionEnd",
                    transition: "transitionend"
                },
                k = {
                    WebkitTransform: "-webkit-transform",
                    MozTransform: "-moz-transform",
                    OTransform: "-o-transform",
                    msTransform: "-ms-transform",
                    transform: "transform"
                };
            if (this.support) {
                this.transEndEventName = h[d.prefixed("transition")] + ".cbpFWSlider";
                this.transformName = k[d.prefixed("transform")]
            }
            this.current = 0;
            this.old = 0;
            this.isAnimating = false;
            this.$list.css("width", 100 * this.itemsCount + "%");
            if (this.support) {
                this.$list.css("transition", this.transformName + " " + this.options.speed + "ms " + this.options.easing)
            }
            this.$items.css("width", 100 / this.itemsCount + "%");
            if (this.itemsCount > 1) {
                this.$navPrev = c('<span class="cbp-fwprev"><</span>').hide();
                this.$navNext = c('<span class="cbp-fwnext">></span>');
                c("<nav/>").append(this.$navPrev, this.$navNext).appendTo(this.$el);
                var l = "";
                for (var g = 0; g < this.itemsCount; ++g) {
                    var f = g === this.current ? '<span class="cbp-fwcurrent"></span>' : "<span></span>";
                    l += f
                }
                var j = c('<div class="cbp-fwdots"/>').append(l).appendTo(this.$el);
                this.$navDots = j.children("span")
            }
        },
        _initEvents: function() {
            var f = this;
            if (this.itemsCount > 1) {
                this.$navPrev.on("click.cbpFWSlider", c.proxy(this._navigate, this, "previous"));
                this.$navNext.on("click.cbpFWSlider", c.proxy(this._navigate, this, "next"));
                this.$navDots.on("click.cbpFWSlider", function() {
                    f._jump(c(this).index())
                })
            }
        },
        _navigate: function(f) {
            if (this.isAnimating) {
                return false
            }
            this.isAnimating = true;
            this.old = this.current;
            if (f === "next" && this.current < this.itemsCount - 1) {
                ++this.current
            } else {
                if (f === "previous" && this.current > 0) {
                    --this.current
                }
            }
            this._slide()
        },
        _slide: function() {
            this._toggleNavControls();
            var g = -1 * this.current * 100 / this.itemsCount;
            if (this.support) {
                this.$list.css("transform", this.support3d ? "translate3d(" + g + "%,0,0)" : "translate(" + g + "%)")
            } else {
                this.$list.css("margin-left", -1 * this.current * 100 + "%")
            }
            var f = c.proxy(function() {
                this.isAnimating = false
            }, this);
            if (this.support) {
                this.$list.on(this.transEndEventName, c.proxy(f, this))
            } else {
                f.call()
            }
        },
        _toggleNavControls: function() {
            switch (this.current) {
                case 0:
                    this.$navNext.show();
                    this.$navPrev.hide();
                    break;
                case this.itemsCount - 1:
                    this.$navNext.hide();
                    this.$navPrev.show();
                    break;
                default:
                    this.$navNext.show();
                    this.$navPrev.show();
                    break
            }
            this.$navDots.eq(this.old).removeClass("cbp-fwcurrent").end().eq(this.current).addClass("cbp-fwcurrent")
        },
        _jump: function(f) {
            if (f === this.current || this.isAnimating) {
                return false
            }
            this.isAnimating = true;
            this.old = this.current;
            this.current = f;
            this._slide()
        },
        destroy: function() {
            if (this.itemsCount > 1) {
                this.$navPrev.parent().remove();
                this.$navDots.parent().remove()
            }
            this.$list.css("width", "auto");
            if (this.support) {
                this.$list.css("transition", "none")
            }
            this.$items.css("width", "auto")
        }
    };
    var a = function(f) {
        if (b.console) {
            b.console.error(f)
        }
    };
    c.fn.cbpFWSlider = function(g) {
        if (typeof g === "string") {
            var f = Array.prototype.slice.call(arguments, 1);
            this.each(function() {
                var h = c.data(this, "cbpFWSlider");
                if (!h) {
                    a("cannot call methods on cbpFWSlider prior to initialization; attempted to call method '" + g + "'");
                    return
                }
                if (!c.isFunction(h[g]) || g.charAt(0) === "_") {
                    a("no such method '" + g + "' for cbpFWSlider instance");
                    return
                }
                h[g].apply(h, f)
            })
        } else {
            this.each(function() {
                var h = c.data(this, "cbpFWSlider");
                if (h) {
                    h._init()
                } else {
                    h = c.data(this, "cbpFWSlider", new c.CBPFWSlider(g, this))
                }
            })
        }
        return this
    }
})(jQuery, window);
 
переменные которые называют 1 символом - это просто трэш)
 
А чем помочь то , в чем вопрос ? Если проблемы, возьмите готовый c примерами(их кучи на том JQuery), или просто тупо не работает ? А jquery либу подключали ?
 
Не точно описал проблему наверное. В слайдере нет автопрокрутки. Надо добавить.
 
Нежели все так плохо с веб разработчиками?
 
А причем тут
Нежели все так плохо с веб разработчиками?

Вы дали голый скрипт, который сам по себе работать не будет :) К нему нужен сайт, "внедрение" этого этого скрипта в этот сайт с какими то настройками, наконец контент который этот скрипт должен крутить ...

Ну скажу я вам, что да, поставил я этот скрипт у себя, у меня все работает , Вам это сильно поможет ?

Дали бы ссылку на сайт можно было бы глянуть что там у вас не работает и как ... ошибку то js хоть не дает, firebug-ом или подобными средствами смотрели ?
 
А причем тут


Вы дали голый скрипт, который сам по себе работать не будет :) К нему нужен сайт, "внедрение" этого этого скрипта в этот сайт с какими то настройками, наконец контент который этот скрипт должен крутить ...

Ну скажу я вам, что да, поставил я этот скрипт у себя, у меня все работает , Вам это сильно поможет ?

Дали бы ссылку на сайт можно было бы глянуть что там у вас не работает и как ... ошибку то js хоть не дает, firebug-ом или подобными средствами смотрели ?

DataLife Engine
Ну если это поможет.
 
Ну для начала избавьтесь от ошибок в скриптах, потом будем смотреть дальше
s1.webp
 
Ну сам скрипт на автосмену как бы не рассчитан, но можно сыграть на том что дескрипторы (классы) кнопок прокрутки известны, попробуйте добавить код (после инициализации слайдера), ну или поищите на просторах инета готовый скрипт слайдера с автопрокруткой, их на самом деле дофига
Код:
  setInterval( function(){
              if($('.cbp-fwnext').is(":visible")) {
                 $('.cbp-fwnext').click();   
                }
                else{
                   $('.cbp-fwdots').find('span').click();
                }
    } , 2000 ); 
/* 2000 = 2 сек - установить по вкусу*/
 
Ну сам скрипт на автосмену как бы не рассчитан, но можно сыграть на том что дескрипторы (классы) кнопок прокрутки известны, попробуйте добавить код (после инициализации слайдера), ну или поищите на просторах инета готовый скрипт слайдера с автопрокруткой, их на самом деле дофига
Код:
  setInterval( function(){
              if($('.cbp-fwnext').is(":visible")) {
                 $('.cbp-fwnext').click();   
                }
                else{
                   $('.cbp-fwdots').find('span').click();
                }
    } , 2000 ); 
/* 2000 = 2 сек - установить по вкусу*/
Заработало!!! Можно еще добавить, что бы по окончанию слайдов, он не все обратно за сек перематывал, а начинал с первого?
 
Назад
Сверху