простенький скрипт(листалка фоновых изображений) не работает в хроме и сафари
мой первый скриптик. сильно не смейтесь :)
суть - листалка картинок, заданных фоном хедеру. две кнопки - ссылки - вперед и назад.
<script type="text/javascript">
var n=0;
var name = new Array();
name[0] = 1;
name[1] = 2;
name[2] = 3;
var count = (name.length) - 1;
window.onload = function() {
document.getElementById('forward').onclick=function() {
n++;
if(n> count) n=0;
if(n< 0) n= count;
document.getElementById('header').style.cssText='background:url("images/mainphoto'+name[n]+'.jpg")';
}
document.getElementById('backward').onclick=function() {
n--;
if(n> count) n=0;
if(n< 0) n= count;
document.getElementById('header').style.cssText='background:url("images/mainphoto'+name[n]+'.jpg")';
}
}
</script>
все работает в лисе и опере, но в хроме и сафари - нет. В чем может быть дело? Как я понимаю дело именно в строчке изменения css, потому что хром пытается вывести картинку с названием mainphotoundefined.jpg т.е. не определяется переменная n |
Работает! :D
|
Цитата:
|
Работает.
|
LostSenSS, посмотри как используется бекграунд в объектной модели...
http://htmlbook.ru/css/background Почти в самом низу... |
Цитата:
попробовал писать window вместо document. и вместе с ним. и писать background вместо cssText. так не работает даже в лисе с оперой :/ |
во-первых, пиши так:
document.getElementById('header').style.background = 'url(...)'; во-вторых, учись отлаживать, пишешь в какой-нибудь строчке скрипта слово debugger и браузер остановит выполнение в этом месте, если ты перед этим откроешь "Инструменты разработчика" |
Цитата:
document.getElementById('header').style.background ='url("images/mainphoto'+name[n]+'.jpg")'; debugger такой вариант работает в опере и лисе но по прежднему не работает в сафари и хроме. ошибка следующая - Failed to load resource: the server responded with a status of 404 (Not Found) оно и понятно, вместо значения переменной в имя файла подставляется undefined |
Цитата:
console.log(name, n); и смотришь в консоль "Инструментов разработчика" |
>>>> if(n< 0) n= count; <<<<
|
Цитата:
|
Цитата:
жмешь назад выводится -1 Aetae, Цитата:
если n стал -1 тогда n становится максимальным (т.е. в данном случае 2) и отображается последняя картинка. объясните пожалуйста что не так, замучался уже возиться с этим скриптом :/ |
Цитата:
|
оно совсем не листает?
а console.log поставь перед
document.getElementById('header').style.background = 'url(...)';
такой console.log(n, name, name[n]); и интересует, что оно выведет в момент когда происходит ошибка. Ты просто делаешь, то что тебе говорят, не пытаясь понять? |
Цитата:
вперед выводит 0 "" undefined назад выводит -1 "" undefined получается что сама n считается, но во первых не правильно (в случае нажатии кнопки вперед n должна стать 1, в случае кнопки назад - 0) во вторых n не подставляется видимо в массив name. ибо не определен выходит именно он. странно, что в опере и лисе все отлично работает |
во-первых выложи весь код полностью, и желательно, чтобы его на форуме же можно было и запустить
Цитата:
var a = "";
alert(a);
alert(a[0]);
alert(""[0]);
|
x-yuri вот рабочий пример. оставил самое необходимое только.
сразу с форума вряд ли получится запустить, там же картинки. http://zalil.ru/30375469 300кб |
Цитата:
обнови браузеры в каких не работает. полгода назад он бы и фоксе не запустился или вставляй через document.имя элемента .src=ссылка во всех будет работать. а через ид выделывается |
Цитата:
по поводу document.имя элемента .src=ссылка чет не очень понял ( |
<script> var name = [1, 2, 3]; name[0] = 5; alert(name[0]); </script> |
Цитата:
но от чего так? у меня хром выводит 1цу, а лиса - 5. по логике тут 5. присваиваем элементу массива значение 5 потом выводим этот элемент. от куда чертов хром берет 1цу непонятно |
Цитата:
|
да не при чем тут обращение через document.<имя элемента>, к тому же оно работает не для всех элементов
а причина в том, что глобальные переменные - свойства глобального объекта (упрощенно, см. ниже)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for( var k in window ){
var v = k == 'name' ? eval(k) : '';
document.write(k+': '+v+'<br>');
// document.write(k+': '+window[k]+'<br>');
}
</script>
</body>
</html>
ну и в дополнение объявление переменной через var и создание переменной без var - это не то же самое
<script>
var a = 1; // создаем глобальную переменную
b = 2; // создаем свойство в глобальном объекте (window)
alert( a );
alert( b );
alert( delete a ); // нельзя удалить глобальную переменную
alert( delete b );
try {
alert( a );
} catch( e ){ alert(e); }
try {
alert( b );
} catch( e ){ alert(e); }
</script>
|
уже увидел на что все ему внимание обращали.я имел в виду конкретное свойство src
|
кстати, второй пример - для общего развития. Лучше всегда создавать переменные с помощью var и никогда не удалять их ;) Если нужно удалять, то для этого существуют ассоциативные массивы (объекты, в случае javascript)
|
засунул все объявления внутрь функции и все везде заработало, спасибо
|
Вложений: 3
вообще это делается как-то так (за исключением того, что я картинки по высоте ограничил, чтобы в окно просмотра поместились). В частности, первая картинка вставляется серверным скриптом, причем не обязательно первая по счету, а в зависимости от параметра в URL. Таким образом, поисковая система увидит все изображения и пользователь, в случае отключенного javascript или ошибок в скрипте, тоже увидит все изображения
p.s. а ты говорил, картинки нельзя вставить...
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<style type="text/css">
body {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
}
img{
height: 100px;
}
a {
color: #36c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.throbber {
position: absolute;
visibility: hidden;
background: #000;
opacity: .3;
filter: alpha(opacity=30);
-ms-filter: "alpha(opacity=30)";
-khtml-opacity: .30;
-moz-opacity: .30;
}
.throbber-gif {
background: url(http://upload.wikimedia.org/wikipedia/commons/d/d2/Spinning_wheel_throbber.gif) no-repeat center;
}
.disabled {
color: #999;
text-decoration: none;
}
</style>
<script type="text/javascript">
var prefix = 'http://javascript.ru/forum/attachment.php?';
function qs( v ){
return new QueryString(v);
}
var QueryString = new Class({
initialize: function( v ){
v = v || location.search;
this._assoc = typeOf(v) == 'string'
? v.substr(1).split('&')
.toAssoc(function( v ){
var kv = v.split('=');
return {
'k': decodeURIComponent(kv[0]),
'v': decodeURIComponent(kv[1])
};
})
: v;
},
val: function( n, v ){
if( arguments.length > 1 )
this._assoc[n] = v;
return this._assoc[n];
},
unset: function( n ){
delete this._assoc[n];
},
toAssoc: function(){
return this._assoc;
},
toString: function(){
return '?'+
this._assoc
.map(function( v, k ){
return encodeURIComponent(k)+'='+encodeURIComponent(this._assoc[k]);
})
.join('&');
}
});
Function.implement({
'of': function( o ){
var f = this;
return function(){
return f.apply(o, arguments);
};
}
});
Array.implement({
'toAssoc': function( f ){
var r = {};
for( var i=0; i<this.length; i++ ){
var kv = f(this[i], i, this);
r[kv['k']] = kv['v'];
}
return r;
}
});
Element.implement({
'setCoordinates': function( coords ){
this.setStyles({
'left': coords['left'],
'top': coords['top'],
'width': coords['width'],
'height': coords['height']
});
return this;
}
});
var Img = new Class({
initialize: function( images ){
this._images = images;
this._i = this._images.indexOf( qs().val('img') );
if( this._i == -1 )
this._i = 0;
this._throbber = new Element('div', {'class': 'throbber', 'html': '<div class="throbber-gif"></div>'})
.inject( document.body );
this._forward = $('forward');
this._backward = $('backward');
this._forward.addEvents({
'click': this._next.of(this).pass(true),
'mousedown': function(){ return false; }
});
this._backward.addEvents({
'click': this._next.of(this).pass(false),
'mousedown': function(){ return false; }
});
},
_next: function( next ){
if( ! this._disabled() ){
this._disabled( true );
this._load( newI.of(this)() );
}
return false;
function newI(){
var r = next ? this._i+1 : this._i-1;
r %= this._images.length;
if( r < 0 )
r = this._images.length-1;
return r;
}
},
_load: function( i ){
var img = $('img');
this._showThrobber( true );
img.onload = function(){
this._i = i;
this._disabled( false );
this._showThrobber( false );
}.of(this)
img.src = prefix+this._images[i];
},
_showThrobber: function( show ){
this._throbberGif = this._throbberGif || $$('.throbber-gif')[0];
if( show ){
var coords = $('img').getCoordinates();
this._throbber.setStyles({
'left': coords['left'],
'top': coords['top']
});
this._throbberGif.setStyles({
'width': coords['width'],
'height': coords['height']
});
}
this._throbber
.setStyles({'visibility': show ? 'visible' : ''});
},
_disabled: function( disabled ){
if( arguments.length ){
var f = disabled ? 'addClass' : 'removeClass';
this._forward[f]( 'disabled' );
this._backward[f]( 'disabled' );
}
return this._forward.hasClass('disabled');
}
});
</script>
</head>
<body>
<a id="backward" href="http://javascript.ru/forum/attachment.php?attachmentid=664&stc=1&d=1295611491">backward</a>
<a id="forward" href="http://javascript.ru/forum/attachment.php?attachmentid=663&stc=1&d=1295611491">forward</a>
<br>
<img id="img" src="http://javascript.ru/forum/attachment.php?attachmentid=662&stc=1&d=1295611491">
<script type="text/javascript">
var images = ['attachmentid=662&stc=1&d=1295614554', 'attachmentid=663&stc=1&d=1295614554', 'attachmentid=664&stc=1&d=1295614554'];
new Img( images );
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 06:28. |