0

幅 1200 ピクセルの div があり、その div 内にオーバーフローが隠されている別の div があります。この div には、ランダムな量の画像が隣り合わせに配置されています。画像のサイズもランダムです。これはカルーサルのようなものです。1200px の div の中央にある画像がアクティブな画像です。その画像の横に別の画像が見えます。ユーザーがこれらの画像のいずれかをクリックすると、クリックされた画像が 1200px div の中央に配置されるように、画像が含まれる UL 要素の余白をアニメーション化します。私の現在の方法では、選択した画像が完全に中央に配置されていません。使用できる式はありますか?

現在、これを使用して新しい margin-left 値を計算します (左に移動するため):

    parseInt($('.images').css('margin-left')) - parseInt((active.width() / 2) + target.width() / 2)

私の数学のスキルが非常に低いことを考えると、誰かがより良いものを考え出すことを願っています.

リクエストごとに、HTML と CSS:

    <div id="slideshow">
        <div class="inside">
            <ul class="images">
                <li>
                    <img src="img/1.jpg" width="550" height="550" alt="" />
                </li>
                <li class="activeimg">
                    <img src="img/2.jpg" width="550" height="367" alt=""/>
                </li>
                <li>
                    <img src="img/3.jpg" width="370" height="550" alt="" />
                </li>
                <li>
                    <img src="img/4.jpg" width="393" height="550" alt="" />
                </li>
                <li>
                    <img src="img/5.jpg" width="550" height="356" alt="" />
                </li>
            </ul>
        </div>
    </div>

そしてCSS：

#slideshow {
margin: 0 auto;
width: 1200px;
height: 600px;
background-color: #525252;
margin-top: 100px;
border:1px solid black;
overflow: hidden;
text-align: center;
}

#slideshow .inside {
height: 550px;
overflow: hidden;
margin: 25px 0;
}

#slideshow ul {
margin: 0;
padding: 0;
transition: margin 1s;
-moz-transition: margin 1s;
-webkit-transition: margin 1s;
-o-transition: margin 1s;
}
#slideshow li {
list-style-type: none;
float: left;
margin-right: 30px;
position: relative;
}
4

1 に答える 1

1

新しいクラスを作成し、.c-imgjavascript を使用してこのクラスを に追加/削除する必要がありますli。

.c-img {
position:fixed;
margin:(...your calculated margin);
}

http://jsfiddle.netでこれを試して、結果をここにリンクしてください。

于 2013-03-25T16:05:38.760 に答える