Слайдер с помощью CSS и jQuery - 1000 р.
Добрый день. Кто может скопировать слайдер с этого Сайта http://www.netdreams.co.uk/ и вставить мне на сайт ? (Есть урок как его сделать, но придётся и в Фотошопе полазить...)
Нужно установить точно такой же слайдер ко мне на сайт, так же на на шапку... Или аналогичный, чтоб смотрелся так же круто=)) В общем что требуется: 1. Установка готового (Если найдёте), создание нового с уже приготовленным уроком по его созданию без исходников. 2. Подгонка под шапку, знание фотошопа (рисовки любой) + не много вёрстки. 3. После вставки, исправить чучуть дизайн под этот слайдер. Это рисунок кнопки пуск и верхняя панель сайта Это 20 минут от силы, там всё легко. |
Крутость заключается в медленно набирающемся названии?)
|
Цитата:
|
Цитата:
|
Цитата:
|
Ну блин что нет знатоков по слайдерам ? От силы 3 часа работы кто шарит что куда...
|
Цитата:
|
Цитата:
|
Цитата:
|
пять минут и дизайн:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.slider {
position: relative;
background-color: #000;
border: 1px solid #666;
width: 860px;
height: 278px;
}
.slider .images {
overflow: hidden;
width: 100%;
height: 100%;
}
.slider .images div {
width: 100%;
height: 100%;
}
.slider .helper {
position: absolute;
bottom: 0;
width: 100%;
}
.slider .helper .fill {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
.slider .helper .texts {
position: relative;
float: left;
}
.slider .helper .texts p {
display: inline-block;
margin: 15px 0 0 20px;
padding-left: 20px;
font: normal normal 400 10px/16px Tahoma;
color: #fff;
border-left: 1px solid #666;
text-transform: uppercase;
}
.slider .helper .texts p:first-child {
border-left: 0;
padding-left: 0;
}
.slider .helper .buttons {
position: relative;
float: right;
padding: 8px 10px 4px 0px;
}
.slider .helper .buttons b {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 100%;
background-color: #000;
border: 0;
border-left: 1px solid #343434;
border-bottom: 1px solid #343434;
margin: 6px;
}
.slider .helper .buttons b.active {
border: 0;
border-left: 1px solid #51959D;
border-top: 1px solid #51959D;
background-color: #02B1D7;
background-image: linear-gradient(to bottom, #59DBEA, #024F7B);
}
</style>
</head>
<body>
<div class="slider">
<div class="images">
<div style="background-image: url('http://www.netdreams.co.uk/wp-content/themes/netdreams/headers/dynamic/EUNAVFOR.jpg')"></div>
<div style="background-image: url('http://www.netdreams.co.uk/wp-content/themes/netdreams/headers/dynamic/Perfect_pint.jpg')"></div>
</div>
<div class="helper">
<div class="fill"></div>
<div class="texts">
<p><b>CLIENT</b>: Perfect Pint</p>
<p>What Real Ales are serving near me? Perfect Pint will show you.</p>
</div>
<div class="buttons">
<b></b><b class="active"></b><b></b><b></b><b></b>
</div>
</div>
</div>
</body>
</html>
А дальше прикручивание скриптов для анимации |
devote, Благодарю за бесплатную помощь... Но я в этом новичок и нет времени разбираться что куда. Я смотрю вы шарите ^^ Мб возьмётесь за моё дело?
|
Я могу накидать скрипт сегодня вечером, можем пообщаться подробнее по скайпу например.
|
Цитата:
Да мне разбираться со всем этим придётся ХЗ сколько времени... Больше устраивает заплатил сделали и все довольны=)) Ну ща помусолю предыдущий код... Ладно буду делать с вашей помощью=)) Я просто полный чайник в этом... Сколько будут стоить ваши скрипты? |
Что-то около того что указано в теме)
|
Цитата:
|
мм.. я могу вставить его в сайт, если вы дадите ФТП и пароли. Нет проблем. Вставите сами - нет вопросов сделаю дешевле. Просто обсуждать на форуме не очень удобно. Напишите в скайп как будете в сети - пообщаемся подробнее.
Мой скайп TsDaniil |
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style type="text/css">
.slider {
position: relative;
background-color: #000;
border: 1px solid #666;
width: 860px;
height: 278px;
}
.slider .images {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.slider .images div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.slider .images div:first-child {
z-index: 1;
}
.slider .helper {
position: absolute;
bottom: 0;
width: 100%;
z-index: 100;
}
.slider .helper .fill {
left: 0;
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
.slider .helper .texts {
position: relative;
float: left;
}
.slider .helper .texts > div {
clear: both;
display: none;
}
.slider .helper .texts > div:first-child {
display: block;
}
.slider .helper .texts p {
overflow: hidden;
white-space: nowrap;
display: inline-block;
margin: 15px 0 0 20px;
padding-left: 20px;
font: normal normal 400 10px/16px Tahoma;
color: #fff;
border-left: 1px solid #666;
text-transform: uppercase;
float: left;
}
.slider .helper .texts p:first-child {
border-left: 0;
padding-left: 0;
}
.slider .helper .buttons {
position: relative;
float: right;
padding: 8px 10px 4px 0px;
}
.slider .helper .buttons b {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 100%;
background-color: #000;
border: 0;
border-left: 1px solid #343434;
border-bottom: 1px solid #343434;
margin: 6px;
}
.slider .helper .buttons b.active {
border: 0;
border-left: 1px solid #51959D;
border-top: 1px solid #51959D;
background-color: #02B1D7;
/* градиент для ИЕ 9 */
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22g%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2359DBEA%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23024F7B%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E);
background-image: -webkit-linear-gradient(top, #59DBEA, #024F7B);
background-image: linear-gradient(to bottom, #59DBEA, #024F7B);
/* градиент для ИЕ 8 и ниже */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#59DBEA', EndColorStr='#024F7B', GradientType=0);
}
.slider .helper .buttons b.active, #ie#fix {
/* убрать фильтр в ИЕ выше 8 но оставить в ИЕ 7 */
filter: expression(this.currentStyle.filter);
}
</style>
<script type="text/javascript">
jQuery(function(){
var
itemIndexAt = 0,
sliderWrap = jQuery('.slider'),
imagesWrap = sliderWrap.find('.images'),
textsItems = sliderWrap.find('.texts').children(),
buttonsItems = sliderWrap.find('.buttons').children(),
imagesItems = imagesWrap.children(),
imagesWrapScrollWidth = parseInt(imagesWrap.css('width'))||0;
// инициализация
imagesWrap
.children(':not(:first-child)')
.css({left: imagesWrapScrollWidth});
textsItems.each(function(i) {
jQuery(this).show().children().each(function() {
this.__originalWidth = parseInt(jQuery(this).css('width'))||0;
});
i !== itemIndexAt && jQuery(this).hide();
});
// анимация
function animateSlider() {
var itemIndexPrev = itemIndexAt;
itemIndexAt = ++itemIndexAt < imagesItems.length ? itemIndexAt : 0;
buttonsItems.eq(itemIndexPrev).removeClass('active');
buttonsItems.eq(itemIndexAt).addClass('active');
imagesWrap.animate({
scrollLeft: imagesWrapScrollWidth
}, {
duration: 1000,
complete: function() {
imagesItems.eq(itemIndexPrev).css('left', this.scrollLeft + 'px');
imagesItems.eq(itemIndexAt).css('left', '0px');
this.scrollLeft = 0;
setTimeout(animateSlider, 10000);
}
});
textsItems
.eq(itemIndexPrev).hide().end()
.eq(itemIndexAt).show().end()
.children().css('width', '0px').animate({
_manual: 100
}, {
easing: 'linear',
duration: 1500,
step: function(now) {
var w= this.__originalWidth / 100 * now;
var c = this.__originalWidth / jQuery(this).text().length;
var a = ((w / c) >> 0) * c;
jQuery(this).css('width', a + "px");
},
complete: function() {
this._manual = 0;
}
});
}
setTimeout(animateSlider, 10000);
});
</script>
</head>
<body>
<div class="slider">
<div class="images">
<div style="background-image: url('http://www.netdreams.co.uk/wp-content/themes/netdreams/headers/dynamic/EUNAVFOR.jpg')"></div>
<div style="background-image: url('http://www.netdreams.co.uk/wp-content/themes/netdreams/headers/dynamic/Perfect_pint.jpg')"></div>
</div>
<div class="helper">
<div class="fill"></div>
<div class="texts">
<div>
<p><b>CLIENT</b>: Perfect Pint</p>
<p>What Real Ales are serving near me? Perfect Pint will show you.</p>
</div>
<div>
<p><b>Привет!</b>: Пробный текст</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="buttons">
<b class="active"></b><b></b>
</div>
</div>
</div>
</body>
</html>
|
переключалки и прочие тонкости, сами доделаете...
|
Работает во всех браузерах.. Исключение только ИЕ8 и версии ниже. В них вместо круглой кнопки переключения, отображаются квадратные (из-за отсутствия в них свойства CSS border-radius).. В остальном все как везде.
|
devote, О великий и могучий ^^ Спс за вашу помощь! Я глубоко извиняюсь но он не много подлагивает =)) Как это исправить?
Мб вы за 1 к подгоните его под мою шапку? А то он коротким оказался =)) Да и надо сделать чтоб он подходил по дизайну сайта. |
Цитата:
Цитата:
Цитата:
|
devote, ещё раз спасибо^^ Дальше сам пошаманю.
|
| Часовой пояс GMT +3, время: 17:35. |