旋转木马在移动后留下像素 [英] carousel leaving pixels after moving

问题描述

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

I have made a controllable carousel with the following code.

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& 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});
}

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

The problem is that the carousel does not move in sync with the images ie. some pixels of the previous image creep into the next pane. What to do?

推荐答案

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

Found a solution by tinkering with the CSS. Initially all the images were not stacked side by side even after giving the rule margin:0. So I gave a negative margin and also increased the size of the containing div ie. carousel to account for the negative margins.

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

So the images were stacked and did not overflow to the adjacent panes.

jSfiddle已被编辑。

The jSfiddle has been edited.

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

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

EDIT : Just became aware of the fact that line breaks and other whitespace in HTML makes inline elements have invisible margins. To effectively remove the invisible margins, clean up the whitespace, as has been done in the fiddle : http://jsfiddle.net/m7vjs3gy/3/

这篇关于旋转木马在移动后留下像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！