Question

所以基本上我给了我一行小缩略图（在div中），正好位于另一个隐藏更大图像的div下面，当我点击一个拇指时，当前图像从jquery获取.hide（），我点击的是.show（）'n，非常简单和有效。唯一的问题 - 一秒钟图像消失，在下一个图像出现之前，预览div变空，所有缩略图一直向上移动到div的位置！我该如何预防？

这是脚本： $（document）.ready（function（）{

var current = '#s0';
var last = '#s0';

$(current).show();

$(".thumb").click(function(){
    last = current;
    current = '#s'+$(this).attr('id');
    $(last).hide(1000);
    $(current).show(1000);
    //$('#tmp').text(current+' / '+last);
});

});

页面：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">        </script>
<script src="scripts/scripts.js"></script>
<link rel='stylesheet' href='styles/default.css' type='text/css'>

<html>
<title>Playground</title>
<head>
    <h2>this is a test...</h2>
</head>
<body>
    <?php
    $i = 0;
    $images = glob("./images/*.jpg");

    echo '<div width=600 height=600 class=\'preview\' id=\'slides\'>';
    foreach($images as $image)
    {
    echo '<img class=\'slide\' id=\'s'.$i.'\' src=\''.$image.'\' width=600 height=600 />';
    $i++;
    }
    echo '</div>';

    $i = 0;
    echo '<div class=\'thumbs\' id=\'thumbs\'>';
    foreach($images as $image)
    {
    echo '<img class=\'thumb\' id=\''.$i.'\' src=\''.$image.'\' width=100      height=100 />&nbsp';
    $i++;
    }
    echo '</div>';
    echo '<div id=\'tmp\'/>';
    ?>
</body>

</html>

和css：

.slide{
display: none;
}

body {
 color: black;
 background-color: #DCDCDC;
 font-family: sans-serif;
 font-style: italic;
 font-size: xx-small;
 }

h2{
  text-align: center;
 }

 div{
  text-align: center;
 }

由于某种原因，我无法正确粘贴代码，所以这里是jfiddle地址，而且很多！ http://jsfiddle.net/EbDvk/

使缩略图不移动（jquery隐藏/显示，预览div下的拇指）

0 个答案: