jquery 시각화가 특정 이미지를 희미하게하고 순서를 바꿉니다.

Question

다른 조명 설정에서 일부 렌더 룸을 만들었습니다. 조명을 제어하기 위해 3 개의 버튼을 만드십시오. 아이디어는 특정 이미지를 페이드 인하거나 페이드 아웃하는 것입니다. 켜고 임의의 조명을 사용하면 모든 이미지 변형이 가능합니다.

왼쪽에서 오른쪽으로 버튼을 눌러 의미를 확인하십시오.

jsfiddle SCRIPT

난 3 변수

v1,v2,v3 

이 F는 모두 "1"또는 "0"그래서 예

"101" <- mean that first and last light are on 

모든 변수를 호출 할 수 생각 또 다른 문제는 이미지를 재정렬하여 올바른 이미지 아래에 적절한 이미지를 만드는 것입니다.

누구든지이 문제를 해결할 수 있습니까?

감사합니다!

Answer 1

글쎄, 기억해야 할 첫 번째 것은 fadeOut 모든 이미지에 다음 fadeIn 시작 이미지로 원하는 것입니다. 그런 다음 버튼을 클릭 할 때도 동일한 작업을 수행하십시오. 쉽게 jQuery를 접근 들어 나는이처럼 버튼에 더미 클래스 active 추가 :

<a class="sim1 sim-button active" href="#">v1</a>  
<a class="sim2 sim-button active" href="#">v2</a> 
<a class="sim3 sim-button active" href="#">v3</a> 

체크 아웃이 Fiddle, 다음 아래에있는 내 jQuery 코드입니다 :

$(document).ready(function(){ 
    $("#sim-img img").each(function(){ 
     $(this).fadeOut(100); 
    }); 
    var selected_image = ".i111"; 
    $(selected_image).fadeIn(1000); 
    $(".sim-button").click(function(){ 
     if($(this).hasClass("active")){ 
      $(this).removeClass("active"); 
     }else{ 
      $(this).addClass("active"); 
     } 
     console.log("prev: "+selected_image); 
     $(selected_image).fadeOut(1000); 
     selected_image = ".i"; 
     $(".sim-button").each(function(){ 
      if($(this).hasClass("active")){ 
       selected_image += "1"; 
      }else{ 
       selected_image += "0"; 
      } 
     }); 
     $(selected_image).fadeIn(1000); 
     console.log("next: "+selected_image); 
    }); 
});