RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Ротатор на css и jQuery
Просмотров: 1365  Скачан: 178 раз  Комментариев в теме: 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>
Материалы по теме:

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

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

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

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

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

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Inf...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Rotator на css и jQueryRotator на css и jQuery

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

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

Sell v1.4.1Sell v1.4.1

Sell - это ещё одна довольно гибкая универсальная тема для создания интернет магазина на WordPress с использованием WooCommerce....

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи на PH...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

Оригинальное горизонтальное менюОригинальное горизонтальное меню

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

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery «Elas...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...
  • Текущий 1.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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