Слайдер новостей (Аля WoT) - Форум общения - Logical-portal

Время:

Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.16.67.134

Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.

Страница 1 из 1
1

Слайдер новостей (Аля WoT) (JQ + CSS)

Слайдер новостей (Аля WoT)

ForGive15

Сообщение оставлено 15.12.2011 в 21:18:19 | Сообщение #1

883

Сегодня был мною написал слайдер изображений или новостей, как угодно. Вдохновил, так сказать, меня слайдер на сайте World of Tanks.
Слайдер использует JQuerry, так как он стандартно включен в uCoz.

Характеристики:
- Работает на всех современных браузерах одинаково, при условии, что объявлен
- При загрузке страницы, включается первая картинка.
- Авто переключения нет.
- Все предельно просто, для употребления.
- Использует css и jq.
- Размер изображений 600px на 300px.
- При переключении изображения предыдущее плавно затухает и плавно появляется следующее ( На все 400мс ).
- У каждого изображения есть заголовок и подзаголовок, где можно написать название новости или картинки.
- На поверхности слайдера отключено контекстное меню ( Правый клик ).
- Примерный размер слайдера = 2.68Кб
- Количество картинок, может быть, от 1 до 15 ( Больше не рекомендую ).

Установка:

Сам слайдер:
Скрипт добавит все сам, вам нужно только указать изображения, как в комментарии ( ).

Code

Css код:

Code

/* Slider by ILyeS */
.slider{position:relative;width:600px;height:300px;background:#bbb;cursor:pointer;border:1px solid #000}
.spages{position:absolute;left:8px;top:10px}
.spages div{float:left;margin:0 2px;background:#222;width:25px;height:10px;border:1px solid #fff;border-radius:2px;opacity:0.3;text-align:center;color:#fff;font-size:7pt}
.spages div:hover{opacity:0.5}
.stitle{position:absolute;left:0;bottom:0;right:0;height:60px;background:#333;opacity:0.7;padding:10px;color:#fff;font-weight:700;font:20pt 'Palatino Linotype';text-shadow:0 1px #000;border-top:1px solid #000;cursor:default}
.spodtitle{font-size:12pt}
.slider img{width:600px;height:300px;border:0}

JS код:

Code

Все готово.
Копирайты соблюдать не обязательно. Как хотите.

Спасибо за внимание.

ForGive15	Сообщение оставлено 15.12.2011 в 21:18:19 \| Сообщение #1
Проверенный Poker face Сообщения: 596 883	Сегодня был мною написал слайдер изображений или новостей, как угодно. Вдохновил, так сказать, меня слайдер на сайте World of Tanks. Слайдер использует JQuerry, так как он стандартно включен в uCoz. Характеристики: - Работает на всех современных браузерах одинаково, при условии, что объявлен - При загрузке страницы, включается первая картинка. - Авто переключения нет. - Все предельно просто, для употребления. - Использует css и jq. - Размер изображений 600px на 300px. - При переключении изображения предыдущее плавно затухает и плавно появляется следующее ( На все 400мс ). - У каждого изображения есть заголовок и подзаголовок, где можно написать название новости или картинки. - На поверхности слайдера отключено контекстное меню ( Правый клик ). - Примерный размер слайдера = 2.68Кб - Количество картинок, может быть, от 1 до 15 ( Больше не рекомендую ). Установка: Сам слайдер: Скрипт добавит все сам, вам нужно только указать изображения, как в комментарии ( ). Code <div class="slider" oncontextmenu="return false"> <div class="spages"><div onclick="slider('eq(0)',this)" style="cursor:default;opacity:0.7">×</div></div> <div class="stitle"><div></div><div class="spodtitle"></div></div> <!-- Вводим картинки, которые будут в слайдере. В title пишем заголовок, в alt - подзаголовок, в url - ссылку на картинку, а в href - ссылку куда будет сделан переход при клике --> <a href="/"><img src="url" title="Заголовок 1" alt="Подзаголовок 1"></a> <a href="/"><img src="url" title="Заголовок 2" alt="Подзаголовок 2"></a> <!-- Конец --> </div> Css код: Code /* Slider by ILyeS / .slider{position:relative;width:600px;height:300px;background:#bbb;cursor:pointer;border:1px solid #000} .spages{position:absolute;left:8px;top:10px} .spages div{float:left;margin:0 2px;background:#222;width:25px;height:10px;border:1px solid #fff;border-radius:2px;opacity:0.3;text-align:center;color:#fff;font-size:7pt} .spages div:hover{opacity:0.5} .stitle{position:absolute;left:0;bottom:0;right:0;height:60px;background:#333;opacity:0.7;padding:10px;color:#fff;font-weight:700;font:20pt 'Palatino Linotype';text-shadow:0 1px #000;border-top:1px solid #000;cursor:default} .spodtitle{font-size:12pt} .slider img{width:600px;height:300px;border:0} JS код:* Code <script> // Slider by ILyeS // Автоматическое заполнение переключателей, исходя из колличества картинок function sliderres(){ a=$('.slider').html().split('<img').length-2 if(a>0){for(i=1;i<=a;i++){$('.spages').append('<div onclick=slider("eq('+i+')",this)></div>');$('.slider img:eq('+i+')').attr("style","display:none")}} $('.stitle div:eq(0)').html($('.slider img:eq(0)').attr('title'));$('.stitle div:eq(1)').html($('.slider img:eq(0)').attr('alt')) }sliderres() // Переключение картинки function slider(a,b){ c=$('.slider img:'+a).attr('title') d=$('.stitle div:eq(0)').html() if(c!=d){ $('.spages div').attr("style","") $(b).attr("style","cursor:default;opacity:0.7") $('.spages div').html('') $(b).html('×') $('.stitle div:eq(0)').html(c) $('.stitle div:eq(1)').html($('.slider img:'+a).attr('alt')) $('.slider img').fadeOut(200) $('.stitle').hide() setTimeout(function(){$('.slider img:'+a).fadeIn(200)},200) setTimeout(function(){$('.stitle').show()},400) }} </script> Все готово. Копирайты соблюдать не обязательно. Как хотите. Спасибо за внимание.
	Профиль ICQ Цитата Вверх