1

これは私のコードです（ここでフィドルを参照してください）：

img {
    width: 200px;
    height: 200px;
}

.image-container {
    width: 600px;
    height: 200px;
    overflow: hidden;
}

私はたくさんの画像を持っていますimage-container. 溢れるイメージが隠されています。

画像を左にスライドすると、一番左の画像が滑らかに消えます。

画像を右にスライドすると、一番右の画像がスムーズに消えません。代わりに、それは一瞬で消えます。

左右の動きが違うのはなぜ？両側で滑らかなアニメーションを表示するにはどうすればよいですか?

4

2 に答える 2

2

画像コンテナーの幅が十分でなく、画像が次の行にドロップダウンしているが、オーバーフローがそれを隠しているためです。

このjsFiddle の例を参照してください。

画像コンテナーに現在持っている CSS を使用して画像コンテナーをラッパーでラップし、画像コンテナーをすべての画像を組み合わせた幅 (私の例ではキックの場合は 4000px) にします。

.image-container {
    width: 4000px;
    height: 200px;
}
#wrapper {
    width: 600px;
    height: 200px;
    overflow: hidden;
}
于 2013-02-26T18:01:38.503 に答える
1

私は提案しますwhite-space:nowrap 

     img {
    width: 200px;
    height: 200px;
}
.image-container {
    white-space:nowrap;
    height: 200px;
}
#wrapper {
    width: 600px;
    height: 200px;
    overflow: hidden;
}

こちらのデモをご覧ください：http：//jsfiddle.net/pavloschris/bsjnq/3/

于 2013-02-26T18:08:18.533 に答える