DarAmal,
Вариант цветного фона с анимацией
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
<style type="text/css">
.scrollable {
position:relative;
overflow:hidden;
width: 950px;
height:350px;
}
.scrollable .items {
width:20000em;
position:absolute;
}
.items div {
float:left;
}
</style>
<script>
$(function() {
$("#header_scroller").scrollable({circular: true}).autoscroll({interval: 5000})
var api = $("#header_scroller").data("scrollable");
var color = ["#750708","#003333","#01294C"]
api.onSeek(function(e, i) { console.log(i)
var t="#"+Math.ceil(Math.random()*16777214).toString(16);
// var t = color[i]
api.getItems().animate({
backgroundColor: t
}, 2000 );
});
});
</script>
</head>
<body>
<div class="scroller_container">
<a class="prev browse left"></a>
<div class="scrollable" id="header_scroller">
<div style="left: -3560px;" class="items">
<div class="frame3 cloned">
<div class="col col1">
<div class="profi">
Ноутбуки и Десктопы
</div>
<div class="profi1">
ремонт сертифицированными<br>
специалистами
</div><br>
<br>
<a href="repair/repair-notebooks"><img width="142" height="48" border="0" style=
"border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/read-1.png"></a>
</div><img border="0" style="border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/image2.png" class="image2"></div>
<div class="frame3 cloned">
<div class="col col1">
<div class="profi">
Ноутбуки и Десктопы
</div>
<div class="profi1">
ремонт сертифицированными<br>
специалистами
</div><br>
<br>
<a href="repair/repair-notebooks"><img width="142" height="48" border="0" style=
"border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/read-1.png"></a>
</div><img border="0" style="border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/image2.png" class="image2"></div>
<div class="frame1">
<div class="col col1">
<div class="profi">
Профессиональный
</div>
<div class="profi1">
ремонт и<br>
обслуживание любых
</div>
<div class="profi2">
Принтеров и МФУ
</div><br>
<br>
<a href="repair/repair-printers"><img width="142" height="48" border="0" style=
"border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/read-1.png"></a>
</div><img width="599" height="354" border="0" style="border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/image3.png" class="image1"></div>
<div class="frame2">
<div class="col col1">
<img width="186" height="48" border="0" style="border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/hp_logo.jpg">
<div class="profi1">
в г.Душанбе<br>
от компании
</div><br>
<img width="157" height="75" border="0" style="border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/fg-logo.png"><br>
<a target="_blank" href="http://hp.fg-group.tj"><img width="154" height="59" border="0"
style="border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/read.png"></a>
</div><img width="565" height="380" border="0" style="border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/image1.png" class="image1"></div>
<div class="frame3">
<div class="col col1">
<div class="profi">
Ноутбуки и Десктопы
</div>
<div class="profi1">
ремонт сертифицированными<br>
специалистами
</div><br>
<br>
<a href="repair/repair-notebooks"><img width="142" height="48" border="0" style=
"border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/read-1.png"></a>
</div><img border="0" style="border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/image2.png" class="image2"></div>
<div class="frame1 cloned">
<div class="col col1">
<div class="profi">
Профессиональный
</div>
<div class="profi1">
ремонт и<br>
обслуживание любых
</div>
<div class="profi2">
Принтеров и МФУ
</div><br>
<br>
<a href="repair/repair-printers"><img width="142" height="48" border="0" style=
"border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/read-1.png"></a>
</div><img width="599" height="354" border="0" style="border: 0px none;" src=
"http://service.fg-group.tj/images/stories/slider/image3.png" class="image1"></div>
</div>
</div><a class="next browse right"></a>
</div>
</body>
</html>
