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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carou...

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

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews ...

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid ac...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

Аккордеон изображенийАккордеон изображений с помощью css...

Красивый горизонтальный аккордеон для вывода изображений на сайте....
Интересные публикации:

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

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

XMarket v1.1XMarket v1.1

XMarket - это премиум шаблон интернет магазина для любого вида продукции, один из самых мощных и гибких на сегодняшний день....

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......

Sell v1.4.1Sell v1.4.1

Sell - это ещё одна довольно гибкая универсальная тема для создания интернет магазина на WordPress с использованием WooCommerce....
  • Текущий 1.14/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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