Нужна помощь или совет. Ситуация такая, имеется сайт на нем необходимо сделать так чтобы фон менялся автоматически (картинки фона менялись слева направо). И чтобы фон менялся по нажатию одной из трех картинок тоже слева направо на нужную картинку.
Вот скелет html
<body>
<div id="b-carousel">
<div class="h-carousel-wrapper"> <!-- видимая область карусели -->
<div class="h-carousel-items"> <!-- весь набор элементов карусели -->
<div class="b-carousel-block">
<img id="fon1" src="img/fon1.jpg">
</div>
<div class="b-carousel-block">
<img id="fon2" src="img/fon2.jpg">
</div>
<div class="b-carousel-block">
<img id="fon3" src="img/fon3.jpg">
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="wrapper-pos">
<div id="header">
<ul id="nav">
<li>Главная</li>
<li>Продукция</li>
<li>Комплексные решения</li>
<li>Технологии</li>
<li>О компании</li>
<li>Контакты</li>
</ul>
</div>
<div id="aside">
<div id="as">
<a id="a1" href="http://www.ya.ru"><div id="img1"><p></p></div></a>
<a id="a2" href="http://www.google.ru"><div id="img2"><p></p></div></a>
<a id="a3" href="http://www.mail.ru"><div id="img3"><p></p></div></a>
<div id="img_container"><img src="" ><p></p></div>
</div>
</div>
<div id="content">
<h1 id="h1-t">Досмотровые инспекционные работы</h1>
<div id="cimg1"><img src="img/content1.jpeg" class="img-razmer-l" id="ccimg1"></div>
<div id="cimg2"><img src="img/content2.jpg" class="img-razmer-l" id="ccimg2"></div>
<div id="cimg3"><img src="img/content3.jpg" class="img-razmer-l" id="ccimg3"></div>
</div>
<div id="footer">
подвал
</div>
</div>
</div>
</body>
на смену фона автоматом прописал
var intervalId;
function timer(){
intervalId = setInterval (function(){
$(".h-carousel-items").animate({left: "-1000px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 1000 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.
setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
$(".h-carousel-items .b-carousel-block").eq(0).clone().appendTo(".h-carousel-items"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
$(".h-carousel-items .b-carousel-block").eq(0).remove(); // удаляем первый элемент карусели
$(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
}, 300);
},5000);
}
timer();
Меняется.
Теперь необходимо сделать три функции, чтобы по нажатию на картинку также менялся фон (анимацией слева направо как в автоматическом режиме). Если кликаем на #ccimg1 чтобы картинка фона была fon1.jpg, #ccimg2 - fon2.jpg, #ccimg3 -fon3.jpg. И после нажатия включался опять автоматический режим смены картинок фон, но уже от этой картинки которая нажата
$("#ccimg1").click(function(){
clearInterval(intervalId);
//код для смены фона по клику
timer();
});
$("#ccimg2").click(function(){
clearInterval(intervalId);
//код для смены фона по клику
timer();
});
$("#ccimg3").click(function(){
clearInterval(intervalId);
//код для смены фона по клику
timer();
});
До этого там был слайдер и я мог ориентироваться по текущему номеру слайда, а здесь не могу сообразить как написать функцию смены фона по клику на нужной картинки и отредактировать автоматическую функцию смены картинок, чтобы они были связаны между собой. спасибо.
