0

所以基本上我给了我一行小缩略图（在一个 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/

4

0 回答 0