我正在实现一个 jquery 滑块（这个）。您可以在此处查看我的测试页面
我遇到的问题是我希望一些 div 元素（接触点）保持在顶部，而在后台滑块滑动图片。不幸的是，目前看来我的接触点被视为幻灯片（可能是因为它们被包裹在<div ID="slides">其中，因此我的 DIV“touchPointContainer”就像一张图片一样滑动。我需要更改什么才能让我的接触点始终保持不变在上面吗？非常感谢
HTML：
<div id="slides">
<div id="touchPointContainer"> <a href="#" id="touchPoint1" class="touchPoint">
<p class="initial">Changement</p>
<p class="final">Le crtreement</p>
</a> <a href="#" id="touchPoint2" class="touchPoint">
<p class="initial">Rapidirtre fixé</p>
</a> <a href="#" id="touchPoint3" class="touchPoint">
<p class="initial">Orientation</p>
<p class="final">Le crction</p>
</a> <a href="#" id="touchPoint4" class="touchPoint">
<p class="initial">Ressources</p>
<p class="final">Le coacrtretences</p>
</a> <a href="#" id="touchPoint5" class="touchPoint">
<p class="initial">Créativité</p>
<p class="final">Stimulatrtrer</p>
</a> <a href="#" id="touchPoint6" class="touchPoint">
<p class="initial">Autonomie</p>
<p class="final">L’objecrtreret</p>
</a> </div>
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
</div>
CSS：
#touchPointContainer {
position: relative;
height: 600px;
}
#touchPointContainer a { text-decoration: none }
.touchPoint {
position: absolute;
width: 80px;
height: 80px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
-webkit-box-shadow: 0 0 4px 6px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 4px 6px rgba(0, 0, 0, 0.1);
color: #5bb6e7;
text-align: center;
font-size: 12px;
-webkit-transition: width .2s, height .2s, margin .2s;
-moz-transition: width .2s, height .2s, margin .2s;
-ms-transition: width .2s, height .2s, margin .2s;
-o-transition: width .2s, height .2s, margin .2s;
transition: width .2s, height .2s, margin .2s;
-o-box-shadow: 0 0 4px 6px rgba(0, 0, 0, 0.1);
}
.touchPoint { display: table }
.touchPoint p {
display: table-cell;
vertical-align: middle;
font-size: 11px;
}
.touchPoint .final,
.touchPoint:hover .initial,
.touchPoint:active .initial { display: none }
.touchPoint .initial,
.touchPoint:hover .final,
.touchPoint:active .final { display: table-cell }
.touchPoint:hover,
.touchPoint:active {
margin: -40px 0 0 -40px;
padding: 5px;
width: 250px;
height: 250px;
-webkit-transition: width .2s, height .2s, margin .2s;
-moz-transition: width .2s, height .2s, margin .2s;
-ms-transition: width .2s, height .2s, margin .2s;
-o-transition: width .2s, height .2s, margin .2s;
transition: width .2s, height .2s, margin .2s;
}
#touchPoint1 {
top: 260px;
left: 140px;
}
#touchPoint2 {
top: 240px;
left: 440px;
}
#touchPoint3 {
top: 150px;
left: 670px;
}
#touchPoint4 {
top: 90px;
left: 480px;
}
#touchPoint5 {
top: 390px;
left: 300px;
}
#touchPoint6 {
top: 370px;
left: 670px;
}
