Не работает слайдер в IE9

wendstor · October 1, 2012

В общем написал слайдер, проверил в Opera, FireFox, Maxthon, показывает всё отлично, но есть одно но, данный код не как не хочет работать в IE9, начинает подтармаживать плюс ко всему нет отоброжения картинок в слайдере. В чём может быть причина ?

запуск слайдера

<body onload="Start();">

код слайдера


var newSlider;
 var ShowImg = 1;

 function Slider(){
     var slImageUrl = Array();
            this.Create = Create; 
            this.GetImageUrl = GetImageUrl; 

    function Create(ImageUrl) {
      slImageUrl[Count] = new Image();
      slImageUrl[Count].src = ImageUrl;
    }

    function GetImageUrl(num){
         return slImageUrl[num].src;
     }

 ......................... далее ещё функции ...................................
 }

 function Start() {
     newSlider = new Slider();
     newSlider.Create('img/1.jpg');
     newSlider.Create('img/2.jpg');
     newSlider.Create('img/3.jpg');
     setInterval('Show();',10000);
     SetImage();
     Show();
 }

 // установка фона
 function SetImage(){
 document.getElementById("img_slider").style.backgroundImage = "url('" + newSlider.GetImageUrl(ShowImg) + "')";
 }

 function Show(){
 tmShow = setTimeout('Show();',100);
 // тут идёт проверка и установка след. картинки

     document.getElementById("img_slider").style.opacity = alpha;
     document.getElementById("img_slider").style.filter = "alpha(opacity=" + alpha +")";
 }

nerv · October 1, 2012

попробуйте для начала это

var slImageUrl = Array();

заменить на это

var slImageUrl = [];

moron · October 1, 2012

nerv, какая разница создавать массив с помощью литеральной нотации или конструктора?Результат то один.

Edited October 1, 2012 by moron

nerv · October 1, 2012

moron, если честно, я запамятовал, что функция конструктор Array() с оператором new работает так же, как и без него.

Можно долго гадать на кофейной гуще в чем дело, а можно сделать пример и дать на него ссылку.

Попробуйте заменить строки на ссылки

setInterval('Show();',10000);

на ссылки

setInterval(Show,10000);

p.s.: а вообще, код мягко говоря странный...

Edited October 1, 2012 by nerv

wendstor · October 1, 2012

moron, если честно, я запамятовал, что функция конструктор Array() с оператором new работает так же, как и без него.Можно долго гадать на кофейной гуще в чем дело, а можно сделать пример и дать на него ссылку.Попробуйте заменить строки на ссылки
setInterval('Show();',10000);
на ссылки
setInterval(Show,10000);
p.s.: а вообще, код мягко говоря странный...

В смысле странный ? Только разбираюсь с javascript, в нём голову сломать можно с его ООП, а точнее с созданием обьектов. Их если не ошибаюсь вариантов 3-4.

Пробывал написать отдельную тестовую для установки прозрачности, при малых разрешениях слайдера почему то работает нормально, но вот если поставить требуемую 1000х350 px всё идёт в разнос, начинаются траблы. Также заметил что IE9 также стала поддерживать style.opasity , до этого для прозрачности использовали style.filter

ниже выкладываю полный пример кода:

slider.js


var ShowImg = 1;
var alpha = 0;
var newSlider;
var tmShow;
var type = 1;

function Slider(){
	var slImageUrl = new Array();
	var slData = new Array();
	var slUrl = new Array();
	var Count = 0;

	this.Create = Create; 
	this.GetImageUrl = GetImageUrl; 
	this.GetData = GetData;
	this.GetUrl = GetUrl; 
	this.GetCount = GetCount;

	function Create(ImageUrl, Data, Url) {
		Count++;
		slImageUrl[Count] = new Image();
		slImageUrl[Count].src = ImageUrl;
		slData[Count] = new String();
		slData[Count] = Data;
		slUrl[Count] = new String();
		slUrl[Count] = Url;
		}
	function GetImageUrl(num){
		return slImageUrl[num].src;
	}
	function GetData(num){
		return slData[num];
	}
	function GetUrl(num){
		return slUrl[num];
	}
	function GetCount(){
		return Count;
	}	
}

function Start() {
	newSlider = new Slider();
	newSlider.Create('img/1.jpg','jhcgksdjhfg','1.html');
	newSlider.Create('img/2.jpg','jhcgksdjhfg','2.html');
	newSlider.Create('img/3.jpg','jhcgksdjhfg','3.html');
	setInterval('Show();',10000);
	SetImage();
	Show();
}

function SetImage(){
	document.getElementById("img_slider").style.backgroundImage = "url('" + newSlider.GetImageUrl(ShowImg) + "')";	
	document.getElementById("img_slider").style.opacity = 0;
	document.getElementById("img_slider").style.filter = "alpha(opacity=0)";
}

function Show(){
	tmShow = setTimeout('Show();',100);
	document.getElementById("img_slider").style.opacity = alpha;
	document.getElementById("img_slider").style.filter = "alpha(opacity=" + alpha +")";
	if (type == 1) { 
		alpha += 0.1;
			if (alpha > 1 ){type = 2; clearTimeout(tmShow);}
	}
	if (type == 2) { 
		alpha -= 0.1;
		if (alpha < 0 ) {type = 1; ShowImg ++;
			if (ShowImg > newSlider.GetCount() ){ShowImg = 1;}
			SetImage();
			}
		}
}

nerv · October 1, 2012

В смысле странный ?

обычно, js кодеры так не пишут )

пример по стилю

function Slider() {

    var slImageUrl = [];
    var slData = [];
    var slUrl = [];
    var count = 0;

    this.create = function( imageUrl, data, url ) {
        count++;
        slImageUrl[ count ] = new Image();
        slImageUrl[ count ].src = imageUrl;
        slData[ count ] = data;
        slUrl[ count ] = url;
    };

    this.getImageUrl = function( num ){
        return slImageUrl[ num ].src;
    };

}

в js camelCase. Конструкторы с большой буквы.

Наверно, метод слайдера слайдера должен быть "начать_показ", "пауза", "остановить" и т.п.

свойство opacity - проверяться один раз (первый запуск) и использоваться в дальнейшем в зависимости от результатов проверки (я про opacity || filter)

document.getElementById("img_slider") - сколько раз написано, столько имещется элемент в DOM

Пример имел ввиду залить рабочий пример на http://jsfiddle.net. Замечания по вызову функций (таймеры) Вами не были учтены.

UPD: я так понял у вас все должно быть внутри объекта, кроме var newSlider;

UPD 2: если изображения уже загружены, нет смысла их создавать еще раз new Image()

скачайте готовый слайдер и не мучайтесь )

Edited October 1, 2012 by nerv

Sign In

Не работает слайдер в IE9

Question

wendstor

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

nerv

Link to comment

Share on other sites

moron

Link to comment

Share on other sites

nerv

Link to comment

Share on other sites

wendstor

Link to comment

Share on other sites

nerv

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information