Форум

korzhik · #1 (**permalink**) 20.07.2010, 02:08

Доброй ночи

Столкнулся с проблемой при написании простого слайдшоу для сайта.

Вот код

(function(el){
                var img = ['a1', 'a2', 'a3'], l = img.length, eff = ['fadeIn', 'fadeOut'], k = 1, i = Math.round(Math.random() * (l - 1));
                el[1].css('background', 'url(/img/' + img[0] + '.jpg) center bottom no-repeat');
                (function(){                    
                    el[(m = (i = ++i % l) % 2)].css('background', 'url(/img/' + img[i] + '.jpg) center bottom no-repeat')[eff[k ^= 1]](2000);                    
                    el[m ^= 1][eff[k ^= 1]](2000);
                    setTimeout(arguments.callee, 3000);
                })();
            })([$("#auto1"), $("#auto2")]);

Фигня в том, что при нечетном количестве элементов в массиве, на последнем элементе получается не плавная смена картинок а "перетык" такой. При четном количестве - все работает как надо. Может конечно поспать надо, но очень хочеться сегодня закончить =)

Демо страничка - http://awcentr.ru/new_file.html

Заранее спасибо

рони · #2 (**permalink**) 20.07.2010, 03:45

может так ?

(function (el) {
    var img = ["a1", "a2", "a3"],
        l = img.length,
        eff = ["fadeIn", "fadeOut"],
        i = Math.round(Math.random() * (l - 1)),
        m = 0;
    el[1].css("background", "url(./img/" + img[i] + ".jpg) center bottom no-repeat");
    (function () {
        i++;
        if (i > l - 1) i = 0;
        el[m].css("background", "url(./img/" + img[i] + ".jpg) center bottom no-repeat")[eff[0]](2E3);
        m = m == 1 ? 0 : 1;el[m][eff[1]](2E3);setTimeout(arguments.callee, 3E3)
    })()
})([$("#auto1"), $("#auto2")]);

korzhik · #3 (**permalink**) 20.07.2010, 04:08

рони, спасибо, без вас пришлось бы завтра с утра ковыряться...

правда я так и не понял, что изменилось, кроме удаления переменной К и сокращения тысяч

Ладно, с утра разберусь) Еще раз спасибо

итоговый вариант

(function(el){
    var img = ["a1", "a2", "a3"], l = img.length, eff = ["fadeIn", "fadeOut"], i = Math.round(Math.random() * (l - 1)), m = 0;
    (function(){
        el[m].css("backgroundImage", "url(./img/" + img[(i = ++i % l)] + ".jpg)")[eff[0]](2E3);
        el[m ^= 1][eff[1]](2E3);
        setTimeout(arguments.callee, 3E3)
    })()
})([$("#auto1"), $("#auto2")]);

x-yuri · #4 (**permalink**) 20.07.2010, 04:25

ты сам понял, что написал? Не работает, потому что не фиг так выпендриваться с function(){}, выражениями с побочными эффектами и просто писать мозговыносящий код... какие-то оптимизации, которые скорее всего никто не заметит... неужели по-человечески писать нельзя? Например, как-нибудь так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style>
            .photo {
                position: absolute;
                width: 550px;
                height: 200px;
                top: 40px;
                left: 50px;
                background-position: center bottom;
                background-repeat: no-repeat;
            }
            
        </style>
    </head>
    <body>
        <div id="photo" class="photo" style="background-image: url(http://awcentr.ru/img/a1.jpg);"></div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
        <script type="text/javascript">
            var SlideShow = new Class({
            
                initialize: function( el, imgs ){
                    this._imgs = imgs;
                    this._firstDiv = $(el);
                    this._secondDiv = new Element('div', {'class': 'photo'})
                        .inject(el, 'after');
                    this._i = 0;
                },
                
                start: function(){
                    this.next.of(this).runPeriodically( 3000 );
                },
                
                next: function(){
                    this._firstDiv.fade('out');
                    var src = 'http://awcentr.ru/img/'+this._imgs[this._i];
                    this._secondDiv.setStyle('background-image', 'url('+src+')');
                    this._secondDiv.fade('in');
                    this._swapDivs();
                    this._i = (this._i+1) % this._imgs.length;
                },
                
                    _swapDivs: function(){
                        var t = this._firstDiv;
                        this._firstDiv = this._secondDiv;
                        this._secondDiv = t;
                    }
            });
            
            Function.implement({
				
                of: function( o ){
                    var f = this;
                    return function(){
                        return f.apply( o, arguments );
                    };
                },
                
                runPeriodically: function( interval ){
                    var f = this;
                    setTimeout( function(){
                        f();
                        setTimeout( arguments.callee, interval );
                    }, interval );
                }
            });
        </script>
        <script type="text/javascript">
            new SlideShow( 'photo', [
                'a1.jpg', 'a2.jpg', 'a3.jpg'
            ]).start();
        </script>
    </body>
</html>

korzhik · #5 (**permalink**) 20.07.2010, 04:32

x-yuri,
Конечно понял, я же писал

А что такое выражения с побочными эффектами?

Не в выпендреже дело, просто пишу так и все. По крайней мере, когда знаю, что этот код кроме меня трогать не будет.

По оптимизации. Мой код, как минимум, в 5 раз короче получился.

x-yuri · #6 (**permalink**) 20.07.2010, 05:13

Сообщение от korzhik

Конечно понял, я же писал

если бы ты понял, не обращался бы на форум. Знаешь, была такая шутка: "Однажды И.И. Кашин, разговоривая с самим собой, сказал себе такое, что больше с собой не разговоривает"... Т.е. мало того, что ты пишешь в таком стиле, ты к тому же не можешь найти ошибку в своем коде. И при таком стиле количество ошибок будет всегда больше и написать кусок без ошибок практически нереально, если не что-то простое. Мой скрипт заработал с первого раза. В общем твой код - яркий пример проблем такого стиля

Сообщение от korzhik

А что такое выражения с побочными эффектами?

когда в процессе вычисления выражения изменяются переменные. Например, это

el[m ^= 1][eff[k ^= 1]](2000);

без побочных эффектов будет выглядеть так

m ^= 1;
k ^= 1;
el[m][eff[k]](2000);

Сообщение от korzhik

Не в выпендреже дело, просто пишу так и все. По крайней мере, когда знаю, что этот код кроме меня трогать не будет.

ну а ради чего это все?

Сообщение от korzhik

По оптимизации. Мой код, как минимум, в 5 раз короче получился.

короче не значит лучше. Если речь о производительности, что ты выиграл? Кроме того, твой код, как минимум, в 5 раз запутаннее. И, кстати, мой код - это только класс SlideShow, потому что Function.implement({...}) - это общий код, который может пригодится в других местах, т.е. я его мог уже написать или он мог быть частью фреймворка

korzhik · #7 (**permalink**) 20.07.2010, 07:59

x-yuri,
Шутка хорошая

Про код. Все зависит от задач. Для реально простых вещей, для меня такой стиль кода предпочтительнее. В своем фреймворке - пишу по-другому.

По поводу того, что я в нем запутался, ну блин, бывает, долго не спал, устал, да еще до сих пор бессонница долбит.

В прочем ладно, уже офтоп пошел

Форум

Справочник

Discord чат

Курсы javascript