Форум Сайтостроение Веб-строительство

Плавная смена изображений

S_A_N_T_A
На сайте с 23.11.2009
Offline
154
S_A_N_T_A
1062

Приветствую!

Поставил скрипт плавной смены изображений. Всё отлично работает, но есть одно "НО". Когда сворачиваю браузер на некоторое время и потом разворачиваю обратно, у меня слайды начинают сменяться с бешеной скоростью, наверное навёрстывают упущенное =)

Просьба помочь найти решение, сам в яваскрипте совсем не силён.

Вот код:

<?php $menu = & JSite::getMenu();?>

<script language="JavaScript" type="text/javascript">

var image_count = 7;

var interval = 5000;

var time_out = 10;

var i = 0;

var timeout;

var opacity = 100;

function change_image() {

opacity--;

var j = i + 1;

var current_image = 'img_' + i;

if (i == image_count) j = 1;

var next_image = 'img_' + j;

document.getElementById(current_image).style.opacity=opacity/100;

document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';

document.getElementById(next_image).style.opacity=(100-opacity)/100;

document.getElementById(next_image).style.filter='alpha(opacity='+(100-opacity)+')';

timeout = setTimeout("change_image()", time_out);

if (opacity==1) {

opacity = 100;

clearTimeout(timeout);

}

}

setInterval (function() {i++; if (i>image_count) i=1; change_image();}, interval);

</script>

S3
На сайте с 18.04.2011
Offline
109
sok3535
#1

а с css не подойдет? 

<div id="myfade">

  <img class="bottom" src="/img/1.jpg" />

  <img class="top" src="/img/2.jpg" />

</div>



<style>

@keyframes cf3FadeInOut {

  0% {

  opacity:1;

}

45% {

opacity:1;

}

55% {

opacity:0;

}

100% {

opacity:0;

}

}

#myfade img.top {

animation-name: cf3FadeInOut;

animation-timing-function: ease-in-out;

animation-iteration-count: infinite;

animation-duration: 10s;

animation-direction: alternate;

}

#myfade {

  position:relative;

  height:200px;

  width:400px;

  margin:0 auto;

}

#myfade img {

  position:absolute;

  left:0;

  -webkit-transition: opacity 1s ease-in-out;

  -moz-transition: opacity 1s ease-in-out;

  -o-transition: opacity 1s ease-in-out;

  transition: opacity 1s ease-in-out;

}

#myfade img.top:hover {

  opacity:0;

}

</style>
S_A_N_T_A
На сайте с 23.11.2009
Offline
154
S_A_N_T_A
#2

Данный код не работает

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий