Смена изображения каждые 30 секунд - цикл

Question

Я хотел бы изменить изображение через 30 секунд ...

Код, который я использую, выглядит следующим образом:

Сценарий:

var images = new Array()
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
var x=0;

function changeImage()
{
document.getElementById("img").src=images[x]
x++;
}

И тело:

<img id="img" src="startpicture.jpg">

Сейчас я еще не проверял этот, но если мои расчеты верны, он будет работать:)

Теперь я тоже хочу сделать "переход замирание ", и я хотел бы, чтобы смена изображений была зациклена (она возобновляется после того, как все изображения были показаны).Кто-нибудь из вас, ребята, знает, как это сделать?Я не:)

Answer 1

Я согласен с использованием фреймворков для подобных вещей, просто потому что это проще.Я взломал это очень быстро, просто затухает изображение и затем переключается, также не будет работать в старых версиях IE.Но, как вы видите, код для реального затухания намного длиннее, чем реализация JQuery, опубликованная KARASZI István.

Answer 2

Вы должны взглянуть на различные библиотеки javascript, они могут помочь вам:

• mootools
• jQuery
• Dojo Toolkit
• прототип

Все они имеют учебные пособия, и исчезновение / исчезновениебазовое использование.

Например, в jQuery:

var $img = $("img"), i = 0, speed = 200;
window.setInterval(function() {
  $img.fadeOut(speed, function() {
    $img.attr("src", images[(++i % images.length)]);
    $img.fadeIn(speed);
  });
}, 30000);

Answer 3

Я использовал этот плагин jQuery в прошлом:

CrossSlide

Он отлично работал и делает именно то, что вы хотите.

Answer 4

Посмотрите на innerfade . Вот пример , где я использовал его, чтобы сделать именно то, что вам нужно, я думаю.

Answer 5

Просто используйте That.Its Easy.

<script language="javascript" type="text/javascript">
     var images = new Array()
     images[0] = "img1.jpg";
     images[1] = "img2.jpg";
     images[2] = "img3.jpg";
     setInterval("changeImage()", 30000);
     var x=0;

     function changeImage()
     {
                document.getElementById("img").src=images[x]
                x++;
                if (images.length == x) 
                {
                    x = 0;
                }
     }
</script>

И в теле Напишите этот код: -

<img id="img" src="imgstart.jpg">

Answer 6

Функция setInterval - это та, которая должна использоваться.Вот пример для того же самого без любой причудливой опции исчезновения.Простой Javascript, который выполняет смену изображения каждые 30 секунд.Я предположил, что изображения хранятся в отдельной папке изображений и, следовательно, _images / присутствует в начале каждого изображения.У вас может быть свой собственный путь, который требуется установить.

КОД:

var im = document.getElementById("img");

var images = ["_images/image1.jpg","_images/image2.jpg","_images/image3.jpg"];
var index=0;

function changeImage()
{
  im.setAttribute("src", images[index]);
  index++;
  if(index >= images.length)
  {
    index=0;
  }
}

setInterval(changeImage, 30000);