Question

我试图为此寻找解决办法但却失败了。这是我第一次使用JS（我正在努力学习），所以我不能正确理解搜索结果中的答案的可能性非常高 - 抱歉。

我想要一个 JS轮播，从阵列生成，使用上一个/下一个按钮（理想情况下响应等等，但后来会出现），最好是带字幕下方即可。我可以让旋转木马工作，但当我点击Prev或Next时，我最终得到一个文本链接。而且我不知道如何在下面添加标题数组（我现在已经取出了JS的字幕，因为它进一步搞乱了其他所有内容）。

相关HTML：

<body onload="changePilt()">
  <span id="prev" class="arrow">&#10094;</span>
    <div class="karussell" id="karussell">
      <a href="#"><img class="karu" name="esislaid"></a>
    </div>
  <span id="next" class="arrow">&#10095;</span>
  <div class="caption">
    <h3 name="esikiri"></h3>
  </div>
</body>

CSS，以防万一：

.karussell {
  position: relative;
  width: 100%;
  max-height: 600px;
  overflow: hidden;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  color: #00A7E0;
  margin-top: -22px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

#next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
#prev {
  left: 0;
}
.arrow:hover {
  background-color: rgba(0,0,0,0.8);
}
.caption {
  text-align: center;
  color: #00A7E0;
  padding: 2px 16px;
}
.karu {
    max-width: 75%;
}
@media (max-width:767px){.karu{max-width: 95%;}}

最后，可怕的JS：

var i = 0;
var s = 0;
    var esileht = [];
    var aeg = 5000;

    //Image List
    esileht[0] = 'img/tooted/raamat/graafvanalinn2016.jpg';
    esileht[1] = 'img/tooted/kaart/kaart_taskus_esipool.jpg';
    esileht[2] = 'img/tooted/kaart/graafkaart_esikylg.jpg';

    //Change Image
    function changePilt (){
        document.esislaid.src = esileht[i];

        if(i < esileht.length -1){
        i++;
        } else {
        i = 0;
        }
        setTimeout("changePilt()", aeg);
    }


document.onload = function() {
}

// Left and Right arrows


    //J2rgmine
    function jargmine(){
        s = s + 1;
        s = s % esileht.length;
        return esileht [s];
    }
    //Eelmine
    function eelmine(){
        if (s === 0) {
            s = esileht.length;
        }
        s = s -1;
        return esileht[s];
    }

document.getElementById('prev').addEventListener('click', function (e){
    document.getElementById('karussell').innerHTML = eelmine();
}
);

document.getElementById('next').addEventListener('click', function (e) {
    document.getElementById('karussell').innerHTML = jargmine();
}
);

我确定解决方案非常明显，我似乎无法弄明白......

Answer 1

而不是innerHTML更改图片的src属性

document.querySelector('#karussell img').src = eelmine();

和

document.querySelector('#karussell img').src = jargmine();

单击上一个/下一个箭头时，JS滑块图像消失

1 个答案: