Слайдшоу странно работает
Доброй ночи :)
Столкнулся с проблемой при написании простого слайдшоу для сайта. Вот код
(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 Заранее спасибо |
может так ?
(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")]);
|
рони, спасибо, без вас пришлось бы завтра с утра ковыряться...
правда я так и не понял, что изменилось, кроме удаления переменной К и сокращения тысяч :) Ладно, с утра разберусь) Еще раз спасибо итоговый вариант
(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")]);
|
ты сам понял, что написал? Не работает, потому что не фиг так выпендриваться с 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>
|
x-yuri,
Конечно понял, я же писал :) А что такое выражения с побочными эффектами? Не в выпендреже дело, просто пишу так и все. По крайней мере, когда знаю, что этот код кроме меня трогать не будет. По оптимизации. Мой код, как минимум, в 5 раз короче получился. |
Цитата:
Цитата:
el[m ^= 1][eff[k ^= 1]](2000); без побочных эффектов будет выглядеть так m ^= 1; k ^= 1; el[m][eff[k]](2000); Цитата:
Цитата:
|
x-yuri,
Шутка хорошая :) Про код. Все зависит от задач. Для реально простых вещей, для меня такой стиль кода предпочтительнее. В своем фреймворке - пишу по-другому. По поводу того, что я в нем запутался, ну блин, бывает, долго не спал, устал, да еще до сих пор бессонница долбит. В прочем ладно, уже офтоп пошел :) |
| Часовой пояс GMT +3, время: 00:15. |