Помощь - Поиск - Пользователи - Календарь
Полная версия: Слайдшоу на JavaScript
Форум KAZANHOME > Технологии > Все о программировании
cheslav
Есть скрипт для плавной смены картинок. Вот задача, как сделать чтобы картинки прокручивались сами?
cheslav
Ааааа, никито не знает или партизаним?.. pleasantry.gif
Deja Vu
Цитата(cheslav @ 18.8.2008, 14:19) *

Ааааа, никито не знает или партизаним?.. pleasantry.gif

Код

setTimeout("next(1)",5);
cheslav
Цитата(Deja Vu @ 4.9.2008, 11:53) *

Код

setTimeout("next(1)",5);


Может и верно, не проверял )) мне уже разработчик скрипта подсказал, вот окончательный вариант:
Код
<script>

var slide = new Array;
var pictureName = new Array("flower[1].jpg", "flower[2].jpg", "flower[3].jpg", "flower[4].jpg");

for (var i = 0; i < pictureName.length; i++) {

     slide[i] = new Image();
     slide[i].src = pictureName[i];
}

var m = new Array(0, 100);
var nextImage = 0;
var t = "";


function next(step) {

   if (t != "") return;

   m[0] = 0;
   m[1] = 100;

   nextImage = nextImage + step;

   if (nextImage == pictureName.length) {

      nextImage = 0;
   }  

   if (nextImage == -1) {

      nextImage = pictureName.length - 1;
   }  


   document.getElementById("after").src = slide[nextImage].src;

   change_slide();

}

function change_slide() {

  m[0] += 1;
  m[1] -= 1;

  document.getElementById("before_div").style.opacity = m[1]/100;
  document.getElementById("after_div").style.opacity = m[0]/100;
  document.getElementById("after_div").style.filter="alpha(opacity="+m[0]+")";
  document.getElementById("before_div").style.filter="alpha(opacity="+m[1]+")";

  t = setTimeout("change_slide()",5);
  if (m[0] > 98) {

     clearTimeout(t);
     document.getElementById("before").src = slide[nextImage].src;
     document.getElementById("before_div").style.opacity = 100;
     document.getElementById("before_div").style.filter="alpha(opacity=0)";
     t = "";
     next(1);
  }

}

window.onload = function() {

    next(1);

}

</script>

<style>

.pic { position: absolute; top: 100px; left: 100px }
a.navigation { text-decoration: none }

</style>


<div id="after_div" class="pic">
<img id="after" src="flower[2].jpg">
</div>
<div id="before_div" class="pic">
<img id="before" src="flower[1].jpg">
</div>


А там регулируете по настроению smile3.gif
Cool
а как сделать чтобы когда фотография появлялась то она выдержала какую то паузу а не сразу на следующую???
А все понял))лучше будет если if(m[0] > и здест побольше поставить) { а вот где setTimeout лучше поменьше 15норм тогда очень даже неплохо))
Cool
Вот еще проблема... Как сделать чтобы слайд находился именно в одном месте всегда??? т.к если утанавливать место отступами то на мониторах с разным разрешением он будет то в разных местах....
Deja Vu
Короче .... юзай jQouery - под него уже есть плагин слайд шоу ;)
Это текстовая версия — только основной контент. Для просмотра полной версии этой страницы, пожалуйста, нажмите сюда.
Русская версия Invision Power Board © 2001-2024 Invision Power Services, Inc.