To už se řešilo tady nebo třeba tady.
Kód:
<!doctype html >
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>
Bannery
</title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<!-- Rotace bannerů -->
<script>
/**
* Rotace bannerů
*/
rotateBanners = {
/**
* Inicializace
*
* @param params objekt s parametry
* @option width šířka banneru
* @option height výška banneru
* @option interval interval mezi rotacemi (v sekundách)
* @option items pole s daty bannerů ve tvaru {link: '', image: '', alt: ''}
*/
init: function($container, params) {
// Defaultní hodnoty
var
self = this,
params = $.extend({
width: 600,
height: 100,
interval: 10
}, params);
params.interval = params.interval <= 0 ? 1 : params.interval;
params.interval *= 1000;
// Kontroly
if (!params.items)
throw('rotateBanners.init: "Nebyla předána data bannerů v poli items".');
if (!params.items.length)
throw('rotateBanners.init: "Pole items musí obsahovat alespoň jednu položku".');
// Uchování parametrů
$container.data('params', params);
// Nastavení prvního banneru
this.rotate($container);
// Rotace v intervalu params.interval
setInterval(function() {
var id = $container.data('params').id;
self.rotate($container, id < params.items.length - 1 ? ++id : 0);
}, params.interval);
},
/**
* Rotace
*
* @param id index položky v poli params.items (nepovinný, 0)
*/
rotate: function($container, id) {
// Kontroly
if (!$container)
throw('rotateBanners.rotate: "Nebyl předán parametr $container".');
if (!$container.length)
throw('rotateBanners.rotate: "Prvek předaný parametrem $container neexistuje".');
var params = $container.data('params');
if (!params)
throw('rotateBanners.rotate: "Prvek předaný parametrem $container nebyl inicializován".');
params.id = !id || id < 0 || id > params.items.length - 1 ? 0 : id;
var item = $.extend({
link: '',
image: '',
alt: ''
}, params.items[params.id]);
// Vyprázdnění kontejneru a uložení aktuálních parametrů
$container
.data('params', params)
.empty();
// Vytvoření nového banneru a vložení do kontejneru
$([
'<a href="' + item.link + '">',
' <img',
' src="' + item.image + '"',
' alt="' + item.alt + '"',
' />',
'</a>'
].join('\n'))
.appendTo($container)
.css({
width: params.width,
height: params.height
});
}
};
// Alias pro jQuery
$.fn.rotateBanners = function(params) {
rotateBanners.init(this, params);
return this;
};
</script>
<!-- Inicializace -->
<script>
$(function() {
$('#test').rotateBanners({
width: 468,
height: 60,
interval: 2,
items: [
{
link: 'http://www.vase-stavba.cz/d/34264',
image: 'http://stavba-bazar.cz/banner-stavba/fullbanner_i_malej_jarda_vi.gif',
alt: 'Stavební materiál'
},
{
link: 'http://www.onlineprekladac.eu/',
image: 'http://stavba-bazar.cz/banner-stavba/fullbanner-podlahy2.gif',
alt: 'Podlahy a schody',
},
{
link: 'http://stavba-bazar.cz/stavba/',
image: 'http://stavba-bazar.cz/banner-stavba/fullbanner-okna3.gif',
alt: 'Okna a parapety'
}
]
});
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
