<!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>
