Чтобы затухание работало, как правило, вам необходимо загрузить изображения ПЕРВЫМ — все, что вы делаете в этом коде, — это заменяете изображение напрямую, поэтому нет возможности отключить скрипттардери, чтобы сделать это, или иметь дескриптор CSS что.
Конечно, ваш метод также заключается в внедрении скрипттардеров в разметку, когда скрипт должен перехватывать разметку. (тонкое, но важное различие)... но это ерунда, так что у вас там всякая сломанная устаревшая хрень, писающая на разметку с oribt. (не фанат)
Я бы сократил разметку до такого вида:
Код:
#slideShow,
#slideShow img {
width:1240px;
height:180px;
}
#slideShow {
position:relative;
}
#slideShow img {
position:absolute;
top:0;
left:0;
z-index:1;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:opacity 1s;
transition:opacity 1s;
}
#slideShow img.show {
z-index:256;
opacity:1;
filter:alpha(opacity=100);
}]/code]
Which of course you could then mix in all sorts of extra effects from the CSS. Notice I attach the event from the scripting instead of window.onload since **** knows what idiotic bekaptah asshattery turdpress might also be trying to load, which is why I wrapped the code in a self starting function so as to isolate its scope. Since it's basing off the markup you can add/remove img tags to the slideshow until blue in the face - WITHOUT having to change the scripting.
Scripting off, currently only the first image would show if scripting is disabled but CSS is on. In a deployment environment I'd probably add a class to the outer wrapper to use as the hook for hide/show in the CSS instead of #slideShow.
You can't do what you want by just swapping one tag's SRC attribute.
Код (разметка): тогда я загружаю этот скрипт из внешнего файла прямо перед
(function(d){ // first a little helper function function eventAdd(e, event, handler) { if (e.addEventListener) e.addEventListener(event, handler, false); else this.attachEvent('on' + event, handler); } // then our functionality var slideShow = d.getElementById('slideShow'), images = slideShow.getElementsByTagName('img'), current = 0; function nextImage() { images[current].className = ''; current++; if (current >= images.length) current = 0; images[current].className = 'show'; } images[current].className = 'show'; eventAdd(window, 'load', function() { setInterval(nextImage, 8000); }); })(document); Код (разметка): ... тогда CSS предоставит анимацию вместо сценариев.
<div class="slideShow"> <img src="image_1.gif" alt="первый слайд"> <img src="fq1.jpg" alt="второй слайд"> <img src="fq2.jpg" alt="третий слайд"> <img src="fq3.jpg" alt="четвертый слайд"> <!-- .slideShow --></div> Код (разметка):
