Показать сообщение отдельно
  #1 (permalink)  
Старый 09.09.2014, 14:27
Новичок на форуме
Отправить личное сообщение для harley Посмотреть профиль Найти все сообщения от harley
 
Регистрация: 08.09.2014
Сообщений: 3

как привязать карусель к кнопкам выбора
Нужна помощь или совет. Ситуация такая, имеется сайт на нем необходимо сделать так чтобы фон менялся автоматически (картинки фона менялись слева направо). И чтобы фон менялся по нажатию одной из трех картинок тоже слева направо на нужную картинку.

Вот скелет 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();
});

До этого там был слайдер и я мог ориентироваться по текущему номеру слайда, а здесь не могу сообразить как написать функцию смены фона по клику на нужной картинки и отредактировать автоматическую функцию смены картинок, чтобы они были связаны между собой. спасибо.
Ответить с цитированием