Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.11.2014, 02:29
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 201

Картинки по кругу. Пропадают отступы
Вот рабочая ссылка. Как первые 11 картинок пройдут зону видимости следующая идет уже без отступа.

Вот ссылка на пример:
http://jsfiddle.net/b5n00usm/

Вот код:
jQuery.noConflict();

jQuery(document).ready(function(){


jQuery('#scrolled img').addClass('vata');

    var hght = 100; // высота карусели
    speed = 1; // скорость прокрутки
    
         
    var imgs = jQuery("#scrolled > img");
    var scrl = jQuery("#scrolled");
    var crsl = jQuery("#carusel");
    wdth = 0;

    crsl.css({overflow:"hidden","height":hght});
    jQuery.each(imgs,function(index,value){
        wdth += (jQuery(imgs[index]).width());              
    })
    scrl.width(wdth);    
    
    function rightScroll(){
	
        var firstImg = jQuery("#scrolled > img:first");
        var lastImg = jQuery("#scrolled > img:last"); 
		
        var scroll = crsl.scrollLeft();
        crsl.scrollLeft(scroll + speed);
        if(scroll > firstImg.width()){
            crsl.scrollLeft(scroll - (firstImg.width()));
            firstImg.clone(true).insertAfter(lastImg);
            jQuery(firstImg).remove();
        }
    }
    crsl.mouseover(function(){
        clearInterval(timer);                      
    }).mouseout(function(){
        timer = setInterval(rightScroll,25);                   
    })
    timer = setInterval(rightScroll,25);
});


<div id="ja-slideshow">
      <div id="carusel" style="width:100%; margin: 0 0 0 3px; overflow:auto">  
<div id="scrolled">     
        
<img onclick="location.href='/kinoprostor';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/stories/demo/kinoprostor.gif" alt="Кинопростор"/>
    
    
<img onclick="location.href='/semeieniie-restoran-vkusnie-istorii';" style="cursor: pointer;" src="http://www.prostorufa.ru/i/vkus_mimi.png" alt="Ресторан «Вкусные истории»"/>
<img onclick="location.href='/sportmaster';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/sportmaste3r.gif" alt=" «Спорт Мастер» "/>
<img onclick="location.href='/mvideo';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/mvideo3.gif" alt=" «М.Видио» "/>
<img onclick="location.href='/dmir';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/dmir3.gif" alt=" «Детский мир» "/>
<img onclick="location.href='/letualshop';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/stories/demo/letual.gif" alt=" Магазин «Л'Этуаль»"/>
<img onclick="location.href='/zolla';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/zolla_m.gif" alt=" «Zolla» "/>
<img onclick="location.href='/skoroostin';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/resized/i/ostin_200_150.gif"  width="135" height="100"  alt="Магазин «Ostin»"/>

<img onclick="location.href='/letualshop';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/stories/demo/letual.gif" alt=" Магазин «Л'Этуаль»"/>
<img onclick="location.href='/zolla';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/zolla_m.gif" alt=" «Zolla» "/>
    
    
<img onclick="location.href='/skoroostin';" style="cursor: pointer;" src="http://www.prostorufa.ru/images/resized/i/ostin_200_150.gif"  width="135" height="100"  alt="Магазин «Ostin»"/>



</div>     
</div>
    </div>



Не могу понять почему пропадает отступ и все картинки после 11 уже слипаются. Помогите понять в чем дело
Ответить с цитированием
  #2 (permalink)  
Старый 27.11.2014, 02:53
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

изначально после каждой картинки идёт перевод строки что заставляет браузер вставлять отступ (иначе текст из разных строк будет слипаться в одну строку при определенных значениях css)
картинки инлайн элементы т.е. вставляются в документ так же как и обычный текст.
после того как картинку удаляется из начала и вставляется в конец перевод строку туда не вставляется следовательно и отступа нет.
проверять лень =)
Ответить с цитированием
  #3 (permalink)  
Старый 27.11.2014, 03:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ufaclub,
смотри строку 15 например пропуск есть -- когда вставляешь клон этого пропуска нет теги идут слитно
Ответить с цитированием
  #4 (permalink)  
Старый 27.11.2014, 03:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ufaclub,
вариант с float: lefthttp://jsfiddle.net/b5n00usm/1/
Ответить с цитированием
  #5 (permalink)  
Старый 27.11.2014, 03:26
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 201

рони, спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Очистка памяти, отмена загрузки картинки, отмена события. zhurchik Общие вопросы Javascript 16 23.10.2014 13:48
Идентифицировать картинки MellDixX Общие вопросы Javascript 8 04.08.2013 18:16
Функция для перевода размера из байтов в понятный для человека формат Антон Крамолов Ваши сайты и скрипты 4 05.04.2013 16:42
Jcarousel картинки надо чтобы двигались по кругу. swear jQuery 2 28.11.2012 21:45
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42