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

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

ОБСУЖДЕНИЕ

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

Ротатор на css и jQuery
Просмотров: 1323  Скачан: 177 раз  Комментариев в теме: 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, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi...

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

Kenburner слайдерKenburner слайдер

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

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

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

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......
Интересные публикации:

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Lotus Flower v1.2Lotus Flower v1.2

Lotus Flower - это современный универсальный шаблон для WordPress с адаптивной вёрсткой и большим функционалом....

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

Многоуровневое меню, работает оно довольно интересным образом, меню привязывается к......

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

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

Paris ClarkParis Clark

Красивый html шаблон Paris Clark, на главной странице используется привлекательный слайдер, имеется портфолио, контактная форма......

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....
  • Текущий 1.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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