здравствуйте. у меня есть скрипт который меняет текст через определенное время. так же он меняет по очередности картинки. Хотелось бы, чтоб картинки появлялись плавно и исчезали таким ж образом, просмотреть работу скрипта можно
здесь
вот код скрипта :
<script type="text/javascript"><!--
window.onload = function(){
var splasher = document.getElementById("splasher");
splasher.className = "splasher";
var linkwrapper = document.getElementById("links");
var splashes = new Array("Основная цель химчистки салона автомобиля — создание комфорта и уюта внутри авто. Согласитесь не очень приятно ездить в машине с засаленной и потертой обивкой, в грязном и неприятном салоне.", "text2<img style='position: absolute; right: 441px; top: 38px;' src='http://premiumautopolish.com/wp-content/themes/palmtrees/images/array2.jpg' alt=''/>","text3<img style='position: absolute; right: 441px; top: 35px;' src='http://premiumautopolish.com/wp-content/themes/palmtrees/images/array33.jpg' alt=''/>","text4<img style='position: absolute; right: 441px; top: 38px;' src='http://premiumautopolish.com/wp-content/themes/palmtrees/images/array4.jpg' alt=''/>");
var counter = 0;
var links = [];
function output(numOfActive){
while(linkwrapper.childNodes.length){
linkwrapper.removeChild(linkwrapper.childNodes[0]);
}
splasher.innerHTML = splashes[numOfActive];
var left = document.createElement("A");
left.className = "arrow";
left.innerHTML = "<img src='http://premiumautopolish.com/wp-content/themes/palmtrees/images/perlev.jpg' alt='' />";
left.href="javascript: void(0)";
left.onclick = function(){
counter = (counter + splashes.length - 1) % splashes.length;
//if(counter<0 || counter >2) alert(counter);
output(counter);
}
linkwrapper.appendChild(left);
for(var i=0; i < splashes.length; i++){
var lnk = document.createElement("A");
lnk.href = "javascript: void(0)";
lnk.onclick = function(n){
return function(){
counter = n;
splasher.innerHTML = splashes[n];
output(n);
}
}(i);
links[i] = lnk;
if(!(i == numOfActive)){
lnk.className = "link";
} else{
lnk.className = "link active";
}
linkwrapper.appendChild(lnk);
}
var right = document.createElement("A");
right.className = "arrow";
right.innerHTML = "<img src='http://premiumautopolish.com/wp-content/themes/palmtrees/images/perprav.jpg' alt='' />";
right.href="javascript: void(0)";
right.onclick = function(){
counter = (counter + 1) % splashes.length;
output(counter);
}
linkwrapper.appendChild(right);
}
(function(){
counter = (counter + 1) % splashes.length;
splasher.innerHTML = splashes[counter];
counter = counter % splashes.length;
output(counter);
window.setTimeout(arguments.callee, 8000);
}())
}//-->
</script>
<div id="splasher"></div>
<div id="links" class="linkwrapper"></div>
