как привязать карусель к кнопкам выбора
Нужна помощь или совет. Ситуация такая, имеется сайт на нем необходимо сделать так чтобы фон менялся автоматически (картинки фона менялись слева направо). И чтобы фон менялся по нажатию одной из трех картинок тоже слева направо на нужную картинку.
Вот скелет 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(); }); До этого там был слайдер и я мог ориентироваться по текущему номеру слайда, а здесь не могу сообразить как написать функцию смены фона по клику на нужной картинки и отредактировать автоматическую функцию смены картинок, чтобы они были связаны между собой. спасибо. |
Часовой пояс GMT +3, время: 07:38. |