Question

我使用以下代码制作了一个可控制的轮播。

HTML

      <div id = "blanket">
            <div id = "carousel">
                <img id = "cr" src = "img/cr.png"/>
                <img id = "te" src = "img/te.png"/>
                <img id = "mi" src = "img/mi.png"/>
                <img id = "ga" src = "img/ga.png"/>
                <img id = "ro" src = "img/ro.png"/>
            </div>
        </div>

CSS

#carousel{
    height: 100%;
    width: 500%;
}
#carousel img{
    position: relative;
    display: inline-block;
    height: 100%;
    width: 20%;
    border:1px solid white;
}
#blanket{
    position: relative;
    display: inline-block;
    float: right;
    right: 5%;
    top:7%;
    height: 75%;
    width:64%;
    overflow: hidden;
    background: rgba(0,0,0,0.3);
}

jS（包含jQuery＆amp; GSAP）

$(document).ready(function() {

})
$(document).click(function() {
var i = event.target.id;
if(i=="yl"){
    gets(0);
}
else if(i=="gt"){
    gets(1);
}
else if(i=="br"){
    gets(2);
}
else if(i=="rb"){
    gets(3);
}
else if(i=="gb"){
    gets(4);
}
});
function gets(i) {
var off = -1 * (i * $('#carousel img').width());
TweenLite.to($('#carousel img'), 0.7 ,{left:off+"px",ease:Power2.easeOut});
}

问题是旋转木马不会与图像同步移动，即。上一个图像的一些像素爬进下一个窗格。怎么办？

Answer 1

通过修改CSS找到解决方案。最初，即使在给出规则margin:0之后，所有图像也没有并排堆叠。所以我给出了一个负余量，也增加了包含div的大小。 carousel来说明负利润率。

因此图像堆叠在一起，并没有溢出到相邻的窗格。

jSfiddle已被编辑。

http://jsfiddle.net/m7vjs3gy/2/

编辑：刚刚意识到HTML中的换行符和其他空格使得inline元素具有隐形边距。要有效地删除不可见的边距，请清理空白，就像在小提琴中所做的那样：http://jsfiddle.net/m7vjs3gy/3/

旋转木马在移动后留下像素

1 个答案: