Question

我的jquery滑块中的图像有问题。滑块工作正常，但存在一些问题。我可以让图像响应，但是当我删除高度属性时，下面的内容会弹出滑块。然后我添加一个高度值，但是在重新调整窗口大小时图像会变形。我想知道你是否能看到我出错的地方。

HTML

         <div id="indexSlider" class="indexImg">
            <div><img class="indexImg" src="imgs//test/test1.jpg"></div>
            <div><img class="indexImg" src="imgs/test/test2.jpg"></div>
            <div><img class="indexImg" src="imgs//test/test3.jpg"></div>
        </div>

CSS

 .indexImg {
height: 45rem;
width: 100%;    
}


 #indexSlider div {
position:absolute;
z-index: 0;
}

 #indexSlider div.previous {
z-index: 1;
}

 #indexSlider div.current {
z-index: 2;
}

JQUERY

 $(function() {
        // create the image rotator
        setInterval("rotateImages()", 2000);
    });

    function rotateImages() {
        var oCurPhoto = $('#indexSlider div.current');
        var oNxtPhoto = oCurPhoto.next();
        if (oNxtPhoto.length == 0)
            oNxtPhoto = $('#indexSlider div:first');

        oCurPhoto.removeClass('current').addClass('previous');
        oNxtPhoto.css({ opacity: 0.0 }).addClass('current')
                .animate({ opacity: 1.0 }, 700,
                            function() {
                                oCurPhoto.removeClass('previous');
                            });
    }

Answer 1

您可以将图片作为背景添加到div

，而不是使用img标记

<div id="indexSlider">
  <div class="indexImg" style="background-image: url('imgs/test/test1.jpg');"></div>
  <div class="indexImg" style="background-image: url('imgs/test/test2.jpg');"></div>
  <div class="indexImg" style="background-image: url('imgs/test/test3.jpg');"></div>
</div>

在css上

.indexImg {
  height: 45rem;
  width: 100%;
  background-repeat:none;
  background-size:cover;
  background-position:center; 
}

在Jquery滑块内响应Img

1 个答案: