Привет!
Была поставлена задача сделать простенький слайдер в "шапку" сайта. Как результат использовал скрипт "самодельного слайдера" с одного сайта - _http://cave-dell-vino.kiev.ua.
Он работает так - сначала загружает все картинки с помощью скрипта jquery.imgpreload.min.js(_http://www.farinspace.com/jquery-image-preload-plugin/), потом по таймеру меняет CSS свойство z-index картинок. Там ещё можно под определенные адреса страниц прописывать свои картинки.
JS code:
var bannerTime = 4000;
var bannerFade = 2000;
var bannerCount = 0;
var bannerThis = 0;
var remove = false;
$(document).ready(function(){
$('.head-photo div').each(function(){
$(this).attr({'id':'slide-'+bannerCount});
$(this).css({'z-index':'1','display':'block'});
bannerCount++;
});
$('.head-photo div').each(function(){
$(this).attr({'id':'slide-'+bannerCount});
$(this).css({'z-index':'1','display':'block'});
bannerCount++;
});
if(location.href.toLowerCase().search('/') >=0)
{
//для главное страницы показываем все слайды кроме 1 и 2
$('#slide-0').remove();
$('#slide-1').remove();
remove = true;
}
if(location.href.toLowerCase().search('/contacts.html') >=0)
{
//например, для контактов, все слайды
remove = true;
}
if(remove == false)
{
$('#slide-0').remove();
$('#slide-1').remove();
$('#slide-2').remove();
$('#slide-3').remove();
$('#slide-4').remove();
//. . . . .
$('#slide-40').remove();
}
bannerCount = 0;
$('.head-photo div').each(function(){
$(this).attr({'id':'slide-'+bannerCount});
$(this).css({'z-index':'1','display':'block'});
if(bannerCount == 0)
{
$(this).css({'z-index':'10'});
}
bannerCount++;
});
$('.head-photo div img').imgpreload
({
each: function()
{
// this = dom image object
// callback executes when each image loads
},
all: function()
{
// this = jQuery image object selection
// callback executes when all images are loaded
if(bannerCount > 1)
{
setTimeout('nextSlide();',bannerTime);
}
}
});
});
function nextSlide()
{
if(bannerThis < (bannerCount-1))
{
bannerThisTemp = bannerThis+1;
}
else
{
bannerThisTemp = 0;
}
$('#slide-'+bannerThisTemp).css({'z-index':'9'});
$('#slide-'+bannerThis).css({'z-index':'10'});
$('#slide-'+bannerThis).fadeOut(bannerFade,function(){
$('#slide-'+bannerThisTemp).css({'z-index':'10'});
$('#slide-'+bannerThis).css({'z-index':'1','display':'block'});
bannerThis = bannerThisTemp;
setTimeout('nextSlide()',bannerTime);
})
}
HTML code:
<div class="head-photo">
<div class="slide"><img src="/images/head-0.jpg" alt="" /></div>
<div class="slide"><img src="/images/head-1.jpg" alt="" /></div>
<div class="slide"><img src="/images/head-2.jpg" alt="" /></div>
<div class="slide"><img src="/images/head-3.jpg" alt="" /></div>
<!-- . ...................... -->
<div class="slide"><img src="/images/head-40.jpg" alt="" /></div>
</div>
Но у меня получилось картинок 40, размером 25-50кб. Вот я свои 40 штук картинок и "разбил по определенным адресам страниц. Скажем если есть сайт визитка с 10 страницами, то по 4 фото-слайда на страницу. А если есть какая то категория, то так же на категорию(по 4-5 картинок).
Вроде нормально, но меня терзают смутные сомнения, может есть какой то другой способ или более продвинутое решение. Да и надоело каждые раз при переходе на другую страницу созерцать слайды сначала. Что ли рандом какой то сделать...
Возникла у меня идея переделки: каким то макаром одноразово загрузить все 40 картинок при первом открытие сайта, а потом при навигации по сайту, должен изменяться только контент страниц, а картинки в шапке-слайде должны какбы в своем потоке.... т.е. показ не начинается сначала, а продолжается далее.
Может есть более "дружественное" решение в плане производительности или у Вас есть предложения по улучшению. Буду благодарен за помощь.
Буду рад советам и примерам =)
