Question

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

现在，我用它来计算新的左边缘值（左边）：

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

Answer 1

您应该创建一个新的课程.c-img，并使用javascript从li添加/删除此课程。

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

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

具有隐藏溢出的div中心特定的li

1 个答案: