[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
JS слайдер изображений (Горизонтальный)
Дата: Суббота, 23.07.2011, 20:41 | Сообщение # 1
Пользователь
    Сообщений:
    10
    Награды:
    1

Данный слайдер придуман для листания изображений влево и вправо. JS слайдер изображений (Горизонтальный)
Установка:
Вставляем в CSS:
Code
/* DIZ-CS.RU */      
      .infiniteCarousel      
      {      
       position:relative      
      }      

      .infiniteCarousel .wrapper      
      {      
       width:315px;      
       overflow:auto;      
       min-height:10em;      
       margin:0 40px;      
       top:0      
      }      

      .infiniteCarousel .wrapper ul      
      {      
       width:9999px;      
       list-style-image:none;      
       list-style-position:outside;      
       list-style-type:none;      
       margin:0;      
       padding:0;      
       top:0      
      }      

      .infiniteCarousel ul li      
      {      
       display:block;      
       float:left;      
       padding:10px;      
       height:81px;      
       width:113px      
      }      

      .infiniteCarousel ul li a img      
      {      
       display:block      
      }      

      .infiniteCarousel .arrow      
      {      
       display:block;      
       height:36px;      
       width:37px;      
       background:url(http://www.csteror.ru/KAPTUHKU/arrow.png) no-repeat 0 0;      
       text-indent:-999px;      
       cursor:pointer;      
       top:36px;      
       position:absolute      
      }      

      .infiniteCarousel .forward      
      {      
       background-position:0 0;      
       right:3px      
      }      

      .infiniteCarousel .back      
      {      
       background-position:0 -72px;      
       left:5px      
      }      

      .infiniteCarousel .forward:hover      
      {      
       background-position:0 -36px      
      }      

      .infiniteCarousel .back:hover      
      {      
       background-position:0 -108px      
      }      

      /* -DIZ-CS.RU- */

Вставляем код где хотим видеть слайдер:
Code
<script type="text/javascript" src="http://www.csteror.ru/js/csteror.js"></script><table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tbody><tr><td style="padding:3px;"><div class="eTitle" style="text-align:center;">Онлайн сериалы:</div>      
      <div class="eMessage" style="text-align:center;clear:both;padding-top:2px;padding-bottom:2px;"><div class="infiniteCarousel">       
       <div class="wrapper">       
       <ul>       
       <li><a href="Ссылка на файл" title="Интерны"><img src="Ссылка на картинку" border="0" width="90"></a></li>      
       <li><a href="hСсылка на файл" title="Лучшая охрана"><img src="Ссылка на картинку" border="0" width="90"></a></li>      
       <li><a href="Ссылка на файл" title="Гонка (DRIVE)"><img src="Ссылка на картинку" border="0" width="90"></a></li>      
       <li><a href="Ссылка на файл" title="Ходячие мертвецы"><img src="Ссылка на картинку" border="0" width="90"></a></li>      
       <li><a href="hСсылка" title="Наша Russia 5 сезон"><img src="Ссылка" border="0" width="90"></a></li>      
       <li><a href="Ссылка" title="Закрытая школа"><img src="Ссылка" border="0" width="90"></a></li>      
       <li><a href="Ссылка" title="Универ"><img src="Ссылка" border="0" width="90"></a></li>      
       <li><a href="Ссылка" title="Остаться в живых"><img src="Ссылка" border="0" width="90"></a></li>      
       <li><a href="hСсылка" title="Терминатор: Хроники Сары Коннор"><img src="Ссылка" border="0" width="90"></a></li>      
       <li><a href="Ссылка" title="Сверхъестественное"><img src="Ссылка" border="0" width="90"></a></li>      
       <li><a href="Ссылка" title="Барвиха + Золотые"><img src="Ссылка" border="0" width="90"></a></li>      
       <li><a href="Ссылка" title="Зайцев +1"><img src="Ссылка" border="0" width="90"></a></li>      
       <li><a href="Ссылка" title="Реальные пацаны"><img src="Ссылка" border="0" width="90"></a></li>      
       </ul> </div> <br>      
       </div></div></td></tr></tbody></table><br>
  • Страница 1 из 1
  • 1
Поиск: