Question

我正在学习JS，并创建了一个带有标题的旋转木马。

如何让Prev / Next按钮影响字幕和图像？我试过用几种方法组合if语句但是失败了。

相关HTML：

<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 id="esikiri"></h3>
</div>

JS：

var p = 0;
var s = 0;
    var esileht = [];
    var aeg = 5000;
    var kiri = [];

    //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';

    //Captions
    kiri[0] = 'Raamat &quot;Tallinn. Graafiline vanalinn&quot;';
    kiri[1] = 'Tallinna vanalinna graafiline kaart (suur formaat)';
    kiri[2] = 'Tallinna vanalinna graafiline kaart (v&auml;ike formaat)';


// Left and Right arrows


    //Eelmine
    function eelmine(){
        if (p === 0){
            p = esileht.length;
        }
        p = p - 1;
        return esileht[p];

    }
    //Jargmine
    function jargmine(){
        p = p + 1;
        p = p % esileht.length;
        return esileht[p];


    }


document.getElementById('prev').addEventListener('click', function (e){
    document.querySelector('#karussell img').src = eelmine();
}
);

document.getElementById('next').addEventListener('click', function (e) {
    document.querySelector('#karussell img').src = jargmine();
}
);
    //Change Image

    function changePilt (){
        document.esislaid.src = esileht[p];

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

    //Change Caption

    function changeKiri(){
    document.getElementById('esikiri').innerHTML = kiri[s];

    if(s < kiri.length - 1){
        s++;
        }
        else {
            s = 0;
        }
        setTimeout('changeKiri()', aeg);
    }

document.body.onload = function(){
    changePilt();
    changeKiri();
};

CSS，以防万一：

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

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

#next {
  right: 0;
}
#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%;
    animation-name: fade;
    animation-duration: 2s;
}
@keyframes fade {
    from {opacity: 0.4}
    to {opacity: 1}
}
@media (max-width:767px){.karu{max-width: 95%;}}

我做了一个试图说明的小提琴（必须将js粘贴到html标签中，因为某些原因将其粘贴到其中）：Fiddle

Answer 1

真的，你只需要使用.innerHTML（）功能，并完全按照现有的功能进行操作。要么创建一个eelmine2（）函数（或类似的东西）并再次调用它，从kiri []中获取内容，或者只返回p并在两个地方使用它：

document.getElementById('prev').addEventListener('click', function (e){
    document.querySelector('#karussell img').src = eelmine();
    document.querySelector('#esikiri').innerHTML = eelmine2();
});
function eelmine2(){
    if (p === 0){
        p = kiri.length;
    }
    p = p - 1;
    return kiri[p];

}

或

document.getElementById('prev').addEventListener('click', function (e){
    var change = eelmine();
    document.querySelector('#karussell img').src = esileht[change];
    document.querySelector('#esikiri').innerHTML = kiri[change];
});
function eelmine(){
    if (p === 0){
        p = kiri.length;
    }
    p = p - 1;
    return p;
}

这假设您的代码在您在小提琴中设置的公共函数中使用了相同的全局变量。你应该确定在将所有这些变为现实之前将变量传递给函数，但是我没有在这里进一步说明。

如何链接两个if语句

1 个答案: