qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

JQuery ротатор для сайта

Ротатор на css и jQuery
Просмотров: 1468  Скачан: 188 раз  Комментариев в теме: 0

Стильный JQuery ротатор для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по кнопке открыть, открывается дополнительная информация. Ротатор поддерживает прокрутку текста колёсиком мыши.

Шаг 1 - создание разметки

 

HTML

<div class="wrapper">
    <div class="cr-container" id="cr-container">
        <div class="cr-content-wrapper" id="cr-content-wrapper">
            <div class="cr-content-container" id="content-1" style="display:block;">
                <img src="images/1.jpg" class="cr-img"/>
                <div class="cr-content">
                    <div class="cr-content-headline">
                        <h2>Become the perfect housewife</h2>
                        <h3><span>How you can enjoy your time chained to the stove</span> <a href="#" class="cr-more-link"> Перейти →</a></h3>
                    </div>
                    <div class="cr-content-text">
                        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                    </div>
                </div>
            </div>
            <div class="cr-content-container" id="content-2">
                <img src="images/2.jpg" class="cr-img"/>
                <div class="cr-content">
                    <div class="cr-content-headline">
                        <h2>Enjoy the summer!</h2>
                        <h3><span>Welcome the warm season with these new and vibrant trends</span> <a href="#" class="cr-more-link"> Перейти →</a></h3>
                     </div>
                    <div class="cr-content-text">
                        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                        <p>Eveen the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                        <p>Eveen the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                    </div>
                </div>
            </div>
            <div class="cr-content-container" id="content-3">
                <img src="images/3.jpg" class="cr-img"/>
                <div class="cr-content">
                    <div class="cr-content-headline">
                        <h2>Did he cheat on you again?</h2>
                        <h3><span>How to avoid becoming only second</span> <a href="#" class="cr-more-link"> Перейти →</a></h3>
                    </div>
                    <div class="cr-content-text">
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                    </div>
                </div>
            </div>
            <div class="cr-content-container" id="content-4">
                <img src="images/4.jpg" class="cr-img"/>
                <div class="cr-content">
                    <div class="cr-content-headline">
                        <h2>Luxury is not only for big girls</h2>
                        <h3><span>From housewife to millionaire in just a week</span> <a href="#" class="cr-more-link"> Перейти →</a></h3>
                    </div>
                    <div class="cr-content-text">
                        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                    </div>
                </div>
            </div>
            <div class="cr-content-container" id="content-5">
                <img src="images/5.jpg" class="cr-img"/>
                <div class="cr-content">
                    <div class="cr-content-headline">
                        <h2>Spy Fiction at the pool</h2>
                        <h3><span>What you can learn from the Dreyfus affair while sunbathing</span> <a href="#" class="cr-more-link"> Перейти →</a></h3>
                    </div>
                    <div class="cr-content-text">
                        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                    </div>
                </div>
            </div>
            <div class="cr-content-container" id="content-6">
                <img src="images/6.jpg" class="cr-img"/>
                <div class="cr-content">
                    <div class="cr-content-headline">
                        <h2>Fittest Housewife Contest</h2>
                        <h3><span>Participate with the new dusting work-out plan</span> <a href="#" class="cr-more-link"> Перейти →</a></h3>
                    </div>
                    <div class="cr-content-text">
                        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                    </div>
                </div>
            </div>
            <div class="cr-content-container" id="content-7">
                <img src="images/7.jpg" class="cr-img"/>
                <div class="cr-content">
                    <div class="cr-content-headline">
                        <h2>Crazy accessories shopping</h2>
                        <h3><span>The bling bling that makes you sparkle even more</span> <a href="#" class="cr-more-link"> Перейти →</a></h3>
                    </div>
                    <div class="cr-content-text">
                        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                    </div>
                </div>
            </div>
            <div class="cr-content-container" id="content-8">
                <img src="images/8.jpg" class="cr-img"/>
                <div class="cr-content">
                    <div class="cr-content-headline">
                        <h2>Modern Arts for Dummies</h2>
                        <h3><span>Learn how to draw and discover the little Picasso in you!</span> <a href="#" class="cr-more-link"> Перейти →</a></h3>
                    </div>
                    <div class="cr-content-text">
                        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="cr-thumbs">
            <div data-content="content-1" class="cr-selected"><img src="images/thumbs/1.jpg"/><h4>Become the perfect housewife</h4></div>
            <div data-content="content-2"><img src="images/thumbs/2.jpg"/><h4>Enjoy the Summer!</h4></div>
            <div data-content="content-3"><img src="images/thumbs/3.jpg"/><h4>Did he cheat on you again?</h4></div>
            <div data-content="content-4"><img src="images/thumbs/4.jpg"/><h4>Luxury is not only for big girls</h4></div>
            <div data-content="content-5"><img src="images/thumbs/5.jpg"/><h4>Spy Fiction at the pool</h4></div>
            <div data-content="content-6"><img src="images/thumbs/6.jpg"/><h4>Fittest Housewife Contest</h4></div>
            <div data-content="content-7"><img src="images/thumbs/7.jpg"/><h4>Crazy accessories shopping</h4></div>
            <div data-content="content-8"><img src="images/thumbs/8.jpg"/><h4>Arts for Dummies</h4></div>
        </div>
    </div>
    <div class="clr"></div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/jquery.crotator.js"></script>
<script type="text/javascript">
$(window).load(function(){
    $('#cr-container').crotator({
        autoplay : true
    });
});
</script>
Материалы по теме:

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью J...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

Скроллер картинокСкроллер картинок

Красивый скроллер для вашего сайта, имеет возможность прокручиваться как в левую сторону, так и в правую......

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...
Интересные публикации:

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

Вертикальное мульти менюВертикальное мульти меню

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro - jQu...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Room 09 v1.4.0Room 09 v1.4.0

Room 09 - это довольно популярная тема для создания интернет магазинов, которая пользуется большим спросом среди разработчиков на WordPress....

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.4/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить