0

我有一个 1200px 宽的 div，在那个 div 里面我有另一个隐藏溢出的 div。这个 div 有随机数量的图像，它们彼此相邻。图像的大小也是随机的。这就像一场轮播：1200px div 中间的图像是活动图像；在该图像的侧面，您可以看到另一个图像。如果用户单击其中任何一个图像，我会为图像所在的 UL 元素的边距设置动画，以便单击的图像以 1200px div 为中心。我当前的方法不能完美地将所选图像居中，这里有人有我可以使用的公式吗？

现在，我用它来计算新的 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-img并使用 javascript 从li.

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

尝试在http://jsfiddle.net中执行此操作并在此处链接结果。

于 2013-03-25T16:05:38.760 回答