Question

使用jQuery＆＃34; Any List Scroller＆＃34;我已经将它添加到我的网站，但是在某些图像之间似乎总是存在较大差距，此示例链接上的前4个显示正常但滚动（按下右下方的灰色btn /图像缩略图）你会看到差距开始显现。

看不出有什么直接原因。有任何想法吗？容器的数量不应超过我们可以看到的任何类型的边距。

<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

因为您的顶级容器div的ID为＆＃34; demo2＆＃34;，

<div class="als-container product-thumb-carousel" id="demo2">

div中的所有元素都使用＆＃34;＃demo2＆＃34;进行样式设置。你的css文件的一部分，而不是通用的样式部分。

例如，als-item现在从＆＃39;＃demo2 als-item {＆＃39;条目。

有4个缩略图，四个宽度仅为300px。缩略图设置为72px但是＆＃39; li＆＃39;元素是100px。

数学已关闭。

Answer 2

查看生成的源代码，您将需要使UL直接子元素有效列表项元素，而不是您当前所拥有的元素：

enter image description here

ul > div > a > li

实际上它应该是：

ul > li > a > span

我已经将div换成了span，因为你不应该在内联元素（a）中插入块级元素（li）。嵌套的顺序已经更改，以确保锚点内的所有内容都是可点击的。

进行这些更改后，让我们看一下它的回复。 =）

Answer 3

尝试对样式表进行这些更改。

div#content #details-2 #product .product-select {
    height: 72px;
    width: 72px;
} 

#demo2 .als-item {
    margin: 0;
    min-height: 72px;
    min-width: 72px;
    padding: 0;
}

缩略图滚动中图像之间/之后的差距很大

3 个答案: