Санкт-Петербург

+7 904 602 4546

nataris@list.ru

Nataris Studio >>

Тема: делаем баннеры на javascript

Подключаемся к смс

Смс с сайта по 15 коп.

CSS-памятки

товары раздела
Делаем Баннеры на javascript

 

Рассмотрим простой jquery, который реализует этот баннер.

 

var t_banner;
var num_banner_sdvig = 0;

$('.banner').each(function(){
    var banner = $(this);
    
    var w = banner.width();
    var h = banner.height();
    banner.css('overflow', 'hidden');
    banner.css('position', 'relative');

    //уберём все <p>, которые всовывает редактор CKEditor
    var htm = banner.html();
    htm = str_replace('<p>', '', htm);
    htm = str_replace('</p>', '', htm);
    banner.html(htm);
    
    var w_cont = 0;
    banner.children().each(function(){
        var w_ch = $(this).width();
        var h_ch = $(this).height();

        $(this).height(h);
        $(this).width(w);

        w_cont += w;//подсчитываем ширину будущего контейнера
        
        $(this).attr('float', 'left');
    });

    //создаём контейнер с суммарной шириной всех картинок

    banner.wrapInner('<div class="banner_cont" style="width:'+w_cont+'px; position:relative;" />'); 
    if(w_cont>0)
    {
        MoveBannerCont();
    }
});

function MoveBannerCont()
{
    var t = 3000;
    if(num_banner_sdvig == 0)
    {
        $('#banner_cont').animate({
                'left' : '0',
              }, 500, function() {
        });    
    }
    else
    {
        $('.banner_cont').each(function(){
            
            var w_total = $(this).width();
            var left_total = $(this).position().left;
            var sdvig = $(this).children(':first').width();
            
            if(w_total+left_total > sdvig)
            {
                $(this).animate({
                    'left' : '-='+sdvig,
                      }, 500, function() {
                  });
            }
            else
            {
                t = 3;
                $(this).hide();
                $(this).animate({
                    'left' : 0+sdvig,
                      }, 1, function() {
                    $(this).show();
                });
            }
        });
    }
    num_banner_sdvig++;
    clearTimeout(t_banner);
    t_banner = setTimeout(MoveBannerCont, t);//двигаем каждые 3 секунды    
}

Всё, что нам нужно, это ввести в страницу фотографии, включить их в div и прописать ему класс "banner". Во вкладке "дополнительно" для нашего дива в графе "Стиль" написать размеры нашего баннера, например: "width:500px;height:200px". Баннер готов!

Давай дружить

Принимаем


Наверх