Question

好。图片库的右侧有缩略图。它们作为视角倾斜，它们之间有一个空间。当您单击或悬停在缩略图上时，它会转换为左侧并快速消失，从而给人的印象是，当真实图片显示时，它是相同的，但是已缩放且没有角度。

我正试图找到一种让隐藏在大图背后的缩略图的方法，然后返回到桩下。这是代码：

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();
    });
});

})

Answer 1

这是一个更好的基础：http://jsfiddle.net/marijnvdwerf/Cn8qe/1/ 为了可维护性，我在你的html / css / javascript中做了一些修改;我添加了一个拇指容器和全尺寸照片，并为#thumbs中的每个项目添加了一个事件。该函数检查所单击项的索引，并在#pics中显示具有相同索引的项。我建议在#thumbs img中设置拇指的重叠，因此对于每张图片都是相同的（如果您决定需要10张图片而不是4张图片，也会更容易）。

jquery图像库堆叠顺序问题

1 个答案: