Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Прокрутка с помощью javascript

Прокрутка с помощью javascript

Сегодня с вами научимся создавать довольно интересную и не мало важную фишку для сайта. Я уверен вы довольно часто сталкиваетесь с рядом проблем когда контента через чур много, а место под него ограничено, приходится ставить ссылки на доп. страницы и так далие. Если у вас больше чем 5 картинок в галерее, а места мало в этом нам сможет помочь простенькая javascript галерея.

План

1. Начнем с определения каркаса, верстка будет дивная элемент назавем container зададим ему фиксированную ширину и зададим параметр overflow который обрежет все что не влезет в container.

2. Поместим во внутрь контаинера элемент content в котором будут находится все наши изображения, контент это своеобразное окно в котором будет отображаться все, что будет в нашей ленте.

3. Нарисуем стрелочки и запрограммируем для прокручивания нашего окошка тем самым меняя контент так сказать будет карусель на javascript.

Меньше слов больше дела

Оформим css

.leftArrow{float:left;background:url(categories-box-nav-left.png) no-repeat center center;height:200px;width:30px;cursor:pointer;}
.rightArrow{float:left;background:url(categories-box-nav-right.png) no-repeat center center;height:200px;width:30px;cursor:pointer;}
.container{width:608px;height:200px;border:4px solid #ccc;overflow:hidden;float:left;}
.content{width:2000px;height:200px;}
.content img{width:128px;height:128px; background:#EFEFEF;margin:18px;padding:18px;}

оформим "каркас" в html

<div class="leftArrow" onclick="IIPYouScrollToWhile('container','Right',204)"></div>
  <div class="container" id="container">
      <div class="content">
        <img src="imgs/img1.jpg">
        <img src="imgs/img2.jpg">
        <img src="imgs/img3.jpg">
        <img src="imgs/img4.jpg">
        <img src="imgs/img5.jpg">
        <img src="imgs/img6.jpg">
        <img src="imgs/img7.jpg">
        <img src="imgs/img8.jpg">
        <img src="imgs/img9.jpg">
        <img src="imgs/img10.jpg">
        <img src="imgs/img11.jpg">
    </div>
  </div>  
  <div class="rightArrow" onclick="IIPYouScrollToWhile('container','Left',204)"></div>


На стрелки для прокручивания контента ставим вызов javascript которому зададим 3 параметра

1.
<div id="container">

2. стороны прокрутки (лево - право)
3. шаг прокрутки заданный в пикселях, а так же проверка которая не даст прокрутить дальше если лента была уже была прокручена полностью, чтобы не прокручивать в пустоту.

function IIPYouScrollToWhile(id,side,step)
{
    var div=document.getElementById(id);
    if(side=='Left')
    {
        if(div.scrollLeft!=1224)
        div.scrollLeft+=step;
    }
  if(side=='Right')
  {
      div.scrollLeft-=step;
  }
}


Вот и все получаем готовы пример: смотреть.
Опубликовал dimas_ua, 10-09-2010, 00:00 Комментариев: 2
 (голосов: 0)
Пишет Андрей, 21 декабря 2010 03:01
  • Сообщений: 0
  • Новостей: 0
Что это значит:
- "На стрелки для прокручивания контента ставим вызов javascript которому зададим 3 параметра" - Как на стрелочки ставить вызов скрипта?
- "2. стороны прокрутки (лево - право)" - кода не будет?
Пишет Сап, 17 мая 2011 18:31
  • Сообщений: 0
  • Новостей: 0
А как изменить цвет стрелок и размер смотрящего окна?