Question

我目前正在使用此网站：

body {
  margin: 0;
  overflow: hidden;
}
.AbsoluteBack {
  height: 100vh;
  text-align: center;
  background-color: #ccc;
}
.AbsoluteBack img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.LinkLeft {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}
.LinkRight {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

<div id="1" class="AbsoluteBack">
  <img src="http://kingofwallpapers.com/images/images-169.jpg">
  <a href="#3">
    <div class="LinkLeft"></div>
  </a>
  <a href="#2">
    <div class="LinkRight"></div>
  </a>
</div>
<div id="2" class="AbsoluteBack">
  <img src="http://www.w3schools.com/css/trolltunga.jpg">
  <a href="#1">
    <div class="LinkLeft"></div>
  </a>
  <a href="#3">
    <div class="LinkRight"></div>
  </a>
</div>
<div id="3" class="AbsoluteBack">
  <img src="http://www.pnas.org/site/misc/images/15-04709.500.jpg">
  <a href="#2">
    <div class="LinkLeft"></div>
  </a>
  <a href="#1">
    <div class="LinkRight"></div>
  </a>
</div>

问题在于，如果我左右两次导航绝对位置，只有第一张图像正确得到链接。

任何建议？（如果它可能更好，只有css）

Answer 1

试试这个

.AbsoluteBack{position:relative;}

Demo

Answer 2

最简单的方法是用一点点javascript来制作它。

检查出来：

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("java_action");
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    x[slideIndex-1].style.display = "block"; 
}

.button_arrow {
  width:40px;
  height:40px;
  line-height:40px:
  transition: background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
  display: inline-block;
  text-align: center;
  color: #fff;
  background-color: #000;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
}

.arrow_placement_left{
position:absolute;
top:45%;
left:0;
}

.arrow_placement_right{
position:absolute;
top:45%;
right:0;
}

.image_spec{
max-width:590px;
position:relative;
margin: auto;
}

<div class="image_spec">


<img class="java_action" src="http://img.dummy-image-generator.com/abstract/dummy-600x400-FairyLights.jpg">
<img class="java_action" src="http://img.dummy-image-generator.com/abstract/dummy-600x400-Glass.jpg">
<img class="java_action" src="http://img.dummy-image-generator.com/abstract/dummy-600x400-DesiccationCracks.jpg">
<img class="java_action" src="http://img.dummy-image-generator.com/abstract/dummy-600x400-Comb.jpg">

<a class="button_arrow arrow_placement_left" onclick="plusDivs(-1)">&#10094;</a>
<a class="button_arrow arrow_placement_right" onclick="plusDivs(+1)">&#10095;</a>
</div>

之后，如果您不想使用箭头，可以使用过度的CSS代码并删除这些行。

我希望它有所帮助。

导航Web与锚点

2 个答案: