Я хотел бы внести некоторые изменения в код и добавить еще несколько параметров:
1- Поверните изображения с описанием каждого из них, а также ссылкой, 2- Добавьте эффект fadeOut, пока изображение исчезнет.
Вот мой маленький код:
var images = new Array ('BMW.png', 'Maybach.png', 'Mercedes-Benz.png', 'Mini.png', 'Jaguar.png', 'Toyota.png');
var descs = new Array ('BMW', 'Maybach', 'Mercedes-Benz', 'Mini', 'Jaguar', 'Toyota');
var links = new Array ('www.url1.com', 'www.url2.com', 'www.url3.com', 'www.url4.com', 'www.url5.com', 'www.url6.com');
var index = 1;
function rotateImage()
{
$('#myImage').fadeOut('fast', function()
{
$(this).attr('src', images[index]);
$(this).fadeIn(2000, function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
setInterval (rotateImage, 7000);
});
</script>
</head>
<body>
<div id="test">
<a href="www.url1.com">
<img class="rotate" id="myImage" src="BMW.png" width="800" height="300" alt="image test" />
</a>
<div class="rotate" id="myDesc" style="margin-top: -30px; margin-left: 30px;"></div>
</div>
э-э... что-то вроде этого?
(Массив - это ZERO base, поэтому... начальный индекс равен 0 [с 1 вы начинаете с "Maybach.png", а не "BMW.png"]).
"Добавьте эффект fadeOut, пока изображение исчезает" - если изображение исчезает, уже исчезает... вы должны объяснить этот момент...
Однако...
var images = ['http://placehold.it/150x100', 'http://placehold.it/120x150', 'http://placehold.it/90x120', 'http://placehold.it/100x100', 'http://placehold.it/100x150', 'http://placehold.it/150x100'],
descs = ['BMW', 'Maybach', 'Mercedes-Benz', 'Mini', 'Jaguar', 'Toyota'],
links = ['www.url1.com', 'www.url2.com', 'www.url3.com', 'www.url4.com', 'www.url5.com', 'www.url6.com'],
index = 0; //start from first image
function rotateImage()
{
$('#test').fadeOut('fast', function() //fadeout all block (if display none collapse your graphics use animate and "opacity") to hide without change display
{
$(this).find("a").attr('href', links[index]); //add href to url
$(this).find("img").attr('src', images[index]); //add src to image
$(this).find("#myDesc").text(descs[index]); //add description in desc div
$(this).delay(500).fadeIn(2000, function() //delay (a little bit) to wait image load (for bigger image you need longer delay)
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
rotateImage(); //fire first time and then use Setinterval for loop
setInterval (rotateImage, 7000);
});
Надеюсь, это поможет.
Простая предварительная загрузка изображения:
<img src="path/placeholder.gif" data-src="path/realImage.jpg" style="display:none" />
поэтому загружаемое изображение является gif trasparent singol pixel. когда вам нужно предварительно загружать, вам нужно только поместить data-src
в src
и показать изображение... (сделайте это, когда изображение предыдущей анимации было отображено для предотвращения разрыва загрузки при отображении этого изображения)
new Array
для создания нового массива ...