Доработать Слайдер.
Ещё раз всем привет. Слайдер сделал devote за что ему огромное спасибо.
Я что то химичил, химичил так не хрена и не нахимичил^^ Собственно надо сделать как на этом сайте: http://www.netdreams.co.uk/ Чего не хватает: 1. Круглишков (синих) сделать чтоб они были кликабельные. 2. Картинки тоже чтоб были кликабельные. 3. И если возможно сделать чтоб текст так же появлялся. Он не много не так работает, пролистывается что ли ... =)) Сам сейчас что то химичу... Если кому не лень помогите. Вот Код:
<!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: 1000px;
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;
background-image: -webkit-linear-gradient(top, #59DBEA, #024F7B);
background-image: linear-gradient(to bottom, #59DBEA, #024F7B);
}
</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>
|
1. Добавлял новую картинку и тег b - кругляшок. Всё работает, вот только когда картинка перелистывается появляется совсем другая... Короче хз что делать.
|
Без знаний javascript тут далеко не уедешь
|
Цитата:
|
За 5 минут тут не управится.
Необходимо написать функцию, которая бы при нажатии на "кнопку" вычисляла свой номер минус номер активной кнопки. Тогда вы получите количество картинок которые надо проскролить чтобы увидеть желаемую (и заодно сторону скрола в зависимости от знака). Далее - немного исправить функцию анимации, что бы она могла принимать значения о том куда скролить и сколько раз. Самый простой вариант. Изначально вы просили помочь вам за деньги - не вопрос. Добрая душа помогла вам, и сделала почти все, я не буду давать вам готовых ответов, я могу подсказать вам в какую сторону копать, могу объяснить что и как в этом скрипте и помочь с написанием собственного, но не буду делать вам работу полностью и за вас. И мало кто захочет это делать. Пишите, пробуйте, спрашивайте - не будет получаться - вам обязательно помогут. |
Цитата:
Для меня всё это как китайские иероглифы на изучение которых уйдёт минимум пару недель, у меня нет столько времени. Вопрос за деньги актуален ? =)) |
| Часовой пояс GMT +3, время: 05:26. |