jquery 이미지 갤러리 스태킹 순서 문제

좋아. 이미지 갤러리의 오른쪽에는 미리보기 이미지가 있습니다. 그들은 원근법으로 기울어 져 있고, 그들 사이에 공간이 있습니다. 미리보기 이미지를 클릭하거나 가져 가면 왼쪽으로 변환되고 빠르게 사라져 실제 사진이 나타나면 같은 사진이지만 크기가 조정되고 각도가없는 느낌을줍니다.jquery 이미지 갤러리 스태킹 순서 문제

저는 큰 그림 뒤에 숨겨진 축소판을 가져올 수있는 방법을 찾고 있습니다. 더미 아래로 되돌아갑니다.

HTML :

<!DOCTYPE html > 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title></title> 
<link type="text/css" rel="stylesheet" href="plug.css"> 
<script type='text/javascript' src="jquery.js"></script> 
<script type='text/javascript' src="plug.js"></script> 
</head> 
<body> 
    <div id="content"> 
    <img id="thumb"src="pics/tu1.png" width="355" height="335"alt=""> 
    <img id="thumb2"src="pics/tu2.png" width="355" height="335"alt=""> 
    <img id="thumb3"src="pics/tu3.png" width="355" height="335"alt=""> 
    <img id="thumb4"src="pics/tu4.png" width="355" height="335"alt=""> 
    <img id="pic"src="pics/slider3.jpg" width="510" height="768" alt=""> 
    <img id="pic2"src="pics/slider2.jpg" width="510" height="768" alt=""> 
    <img id="pic3"src="pics/slider1.jpg" width="510" height="768" alt=""> 
    <img id="pic4"src="pics/home.jpg" width="510" height="768" alt=""> 
    </div> 
</body> 
</html>

CSS :

img#pic { 
    position:absolute; 
    display: none; 
} 

img#pic2 { 
    position:absolute; 
    display: none; 
} 

img#pic3 { 
    position:absolute; 
    display: none; 
} 

img#pic4 { 
    position:absolute; 
    display: none; 
} 

img#thumb { 
    position:absolute; 
    top:410px; 
    left:470px; 
    z-index:20; 
} 

img#thumb2 { 
    position:absolute; 
    top:410px; 
    left:525px; 
    z-index: 19; 
} 

img#thumb3 { 
    position:absolute; 
    top:400px; 
    left:580px; 
    z-index: 18; 
} 

img#thumb4 { 
    position:absolute; 
    top:400px; 
    left:635px; 
    z-index: 17; 
} 

#content { 
    position:relative; 
    width:1000px; 
    height:768px; 
    top:200px; 
    left:100px; 
    border:2px solid black; 
    text-align: left; 
}

JS :

$(document).ready(function() { 

$('#thumb').click(function() { 
    $('#thumb').animate({ 
     left:'-=350' 
    },250,"linear",function() { 
     $('#thumb').hide(); 
     $('#pic').show(); 
    }); 
}); 


$('#thumb2').click(function() { 
    $('#thumb2').animate({ 
     left:'-=350' 
    },250,"linear",function(){ 
     $('#thumb2').hide(); 
     $('#pic2').show(); 
    }); 
}); 

$('#thumb3').click(function() { 
    $('#thumb3').animate({ 
     left:'-=350' 
    },250,"linear",function(){ 
     $('#thumb3').hide(); 
     $('#pic3').show(); 
    }); 
}); 

$('#thumb4').click(function() { 
    $('#thumb4').animate({ 
     left:'-=350' 
    },250,"linear",function(){ 
     $('#thumb4').hide(); 
     $('#pic4').show(); 
    }); 
}); 

})

출처

2011-04-12 seb

다음 작업을 할 수있는 좋은 기반이있다 : http://jsfiddle.net/marijnvdwerf/Cn8qe/1/여기 코드는유지 보수성을 위해 html/css/javascript에서 약간의 변경을했습니다. 엄지 손가락과 풀 사이즈 사진 용 컨테이너를 추가하고 각 항목에 이벤트를 추가했습니다 (#thumbs). 이 함수는 클릭 된 항목의 인덱스를 확인하고 동일한 인덱스가있는 #pics에 항목을 표시합니다. #thumbs img에 엄지의 겹침 부분을 설정하는 것이 좋습니다. 모든 이미지에서 동일하게 적용됩니다 (네가 4 대신 10 개의 사진이 필요하다고 결정한 경우에도 마찬가지 임).

출처

2011-04-12 23:43:27 marijnvdwerf

jquery 이미지 갤러리 스태킹 순서 문제

답변

관련 문제