Question

我目前正在运行一个脚本，用于从文件夹中抓取图像并以幻灯片形式显示它们。（由于与ie8和9的兼容性，这必须以某种方式完成。）

由于我如何避免纵横比被拉伸，因此图像显示在较小的图像后面，因此您可以看到所有被堆叠的图像而不是仅仅一个图像可见。

我尝试使用

 $('.image-container img:not(active)').css('display','none');

但它会隐藏所有图像而不是显示活动图像。

我还尝试在图像上使用填充，但是因为我不知道图像的大小是什么，为每个图像添加边框/填充，背景为#FFF意味着较小的图像仍然没有阻挡较大的。

我的滑块JS

$.fn.slider = function (interval) {
    var slider = this;

    setInterval(function () {
        var $active = $(slider).find(".active");
        if ($active.length == 0) {
            $active = $(slider).find("IMG:last");
        }
        var $next = $active.next().length ? $active.next() : $(slider).find("IMG:first");
        $active.addClass('last-active');
        $next.css({
                opacity: 0.0
            })
            .addClass('active')
            .animate({
                opacity: 1.0
            }, 1000, function () {
                $active.removeClass('active last-active');
            });
    }, interval);
}

PHP

div class="activelink scrollLink" id="link-9">
                            <img src="<?php echo Yii::app()->theme->baseUrl; ?>/img/blankframe.png" alt="">
                          <div class="slideshow" id="slide7">
                            <div class="image-container">
                                <?php 
                                    $handle = opendir(dirname(realpath(__FILE__)).'/../../customImg/');
                                    while($file = readdir($handle)){
                                       if($file !== '.' && $file !== '..'){
                                           echo '<img src="' . Yii::app()->theme->baseUrl . '/customImg/'.$file.'" border="0" />';
                                        }
                                    }
                                 ?>
                            </div>
                        </div>
                    </div>

CSS

.image-container{
    display: block;
    max-width: 205px;
    max-height: auto;
    position: relative;
    overflow: hidden;
    padding: 90% 5% 10% 5%;
    top:-310px;
    left:13%;
    background-color:#FFF;
    background-size:800px;
}

.image-container img{
  display: block;
  max-width:100%;
  height:auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow:hidden;
  background-color:#FFF;
  border-radius:5px;
}

div.activelink#link-9 img{
  width:260px;
}

div.activelink#link-9{
  background-color:#FFF;
  height:320px;
}

Answer 1

您错过了.

的active

$('.image-container img:not(.active)').css('display','none');
//                          ^

修改

使用not：

$('.image-container img').not('.active').css('display', 'none');

jQuery隐藏所有而不是只是不活动

1 个答案: