Proměnný klikací banner

15. 12. 2011 19:12:53

Zdravím webtržníky,

potřeboval bych poradit s poměrně jednoduchým scriptem. V JS nenapíšu ani jeden řádek a tak doufám že mi někdo schopnější poradí s tímto problémem.

Potřebuji klikací obrázek, který se bude měnit dle nějaké čas. konstanty i s tím odkazem. Výstup v html by měl vypadat nějak takto:

po 5ti sekundách:

po dalších 5ti:

a po dalších zase první obrázek

Našel jsem:

tím se mi mění obrázek, zkoušel jsem to různě upravit i pro odkaz, ale bohužel nefunguje. Jde to vůbec nějak jednoduše použít?

Díky

15. 12. 2011 19:12:53

https://webtrh.cz/diskuse/promenny-klikaci-banner#reply707698

800XE

(8 hodnocení)

15. 12. 2011 19:18:26

To už se řešilo tady nebo třeba tady.

<!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>                                <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);                    // 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                    $(.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>                <script>            $(function() {                $('#test').rotateBanners({                    width: 468,                    height: 60,                    interval: 2,                    items:                 });            });        </script>    </head>    <body>        <div id="test"></div>    </body></html>

15. 12. 2011 19:18:26