问题是在滑块顶部显示元素

Question

我正在实现一个jquery滑块（this one）。你可以查看我的test page here 我遇到的问题是我想要一些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;
}

Answer 1

改变触控元件的位置。顶部

position:absolute

和top:20%

在left:9%

处使用正确的触摸元素

在火灾中试试这个你会明白如何在真实中实现它:)  注意：更改元素fr touch ...

的样式

图像

一个恒定触点的编辑代码

将div包装代码更改为

    <div id="fullwrapper"><a href="#" id="touchPoint1" class="touchPoint" style="
    z-index: 1111111;
">
      <p class="initial">Changement</p>
      <p class="final">Le crtreement</p>
      </a>

看效果：）

新图片