javascript - 缩略图滚动中图像之间/之后的大间隙

Question

通过使用 jQuery“Any List Scroller”，我已将其添加到我的网站，但是某些图像之间似乎总是存在较大差距，此示例链接上的前 4 个显示正常但滚动(按缩略图右下角的灰色按钮/图像)，您会看到开始出现间隙。

看不出有任何直接原因。有任何想法吗？容器不会比它们应该添加到我能看到的任何类型的边距大。

实时网址:http://bit.ly/1bJMREc

<div class="als-container product-thumb-carousel" id="demo2">
                  <span class="als-prev"><img src="http://placehold.it/20x20" alt="prev" title="previous" style="z-index: 99999; position: absolute; left: 70px; top: 40px;" /></span>
                  <div class="als-viewport">
                  <ul class="als-wrapper">
                    <?php $i=0;
                    $rsThumb->data_seek(0);
                     if ($row_rsThumb){ while ($row_rsThumb = $rsThumb->get_row_assoc()){
                     $ww = $dimensions[$i][0];
                     $hh = $dimensions[$i][1];
                     if ($ww > $hh){
                        $dimm = 'width='.(70);
                    } else {
                        $dimm = 'height='.(70);
                    }
                     $i++;                   
                     ?>
                        <div class="product-select">
                            <a class="thumb_button" id="thumb_<?php echo $i; ?>" href="<?php echo HTTP_HOST.'upload/full/'.$row_rsThumb['fileId'].'_'.$row_rsThumb['fileName']; ?>"><li class="als-item"><img id="img_<?php echo $i; ?>" <?php echo $dimm;?> src="<?php echo HTTP_HOST.'upload/340w/'.$row_rsThumb['fileId'].'_'.$row_rsThumb['fileName']; ?>" alt="<?php echo htmlentities(truncate($page->row['pageTitle'])); ?>" /></li></a>
                        </div>
                    <?php } 
                    } ?>
                    </ul>
                    </div>
                </div>

JavaScript

<script type="text/javascript">
                $("#demo2").als({
                    visible_items: 4,
                    scrolling_items: 2,
                    orientation: "horizontal",
                    circular: "yes",
                    autoscroll: "no"
                });
            </script>

CSS

/*************************************
 * generic styling for ALS elements
 ************************************/

.als-container {
    position: relative;
    width: 100%;
    margin: 0px auto;
    z-index: 0;
}

.als-viewport {
    position: relative;
    overflow: hidden;
    margin: 0px auto;
}

.als-wrapper {
    position: relative;
    list-style: none;
}

.als-item {
    position: relative;
    display: block;
    text-align: center;
    cursor: pointer;
    float: left;
}

.als-prev, .als-next {
    position: absolute;
    cursor: pointer;
    clear: both;
}

/*************************************
 * specific styling for #demo2
 ************************************/

#demo2 {
    /* margin: 40px auto; */
}

#demo2 .als-item {
    margin: 0px 5px;
    padding: 4px 0px;
    min-height: 120px;
    min-width: 100px;
    text-align: center;
}

#demo2 .als-item img {
    display: block;
    margin: 0 auto;
    vertical-align: middle;
}

#demo2 .als-prev, #demo2 .als-next {
    top: 40px;
}

#demo2 .als-prev {
    left: 200px;
}

#demo2 .als-next {
    right: 200px;
}

Answer 1

查看生成的源代码，您将希望 UL 直接子元素成为有效的列表项元素，而不是您当前拥有的元素:

ul > div > a > li

实际上应该是:

ul > li > a > span

我已经将 div 替换为 span，因为您实际上不应该在内联元素 (a) 中插入 block 级元素 (li)。嵌套顺序已更改，以确保 anchor 内的所有内容也可点击。

当您完成这些更改后，让我们看看它返回了什么。 =)