Question

我在YouTube上查看了如何使用javascript创建简单幻灯片的指南，它完美无缺。但是，我希望每个图像都链接到特定的href，供用户导航。

<div id="slider_news">
    <a href="news1.html" id="slider_link"><imglink><img src="images/img1.jpg" id="image"></imglink></a>
    <div class="left_hold"><img onClick="img(-1)" class="left" src="images/arrow_left.png"></div>
    <div class="right_hold"><img onClick="img(1)" class="right" src="images/arrow_right.png"></div
</div>

这是我的HTML，我使用＆＃34; a＆＃34;创建了一个围绕图像的链接。标记并给它一个ID（=＆＃34; slider_link＆＃34;）

var imageCount = 1;
var total = 5;
function img(x) {
    var image = document.getElementById('image');
    imageCount = imageCount + x;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;}
    image.src = "images/img"+ imageCount +".jpg";
    var sliderlink = document.getElementById("slider_link");
    if(imageCount = 2){sliderlink.href = "news2.html";} //img2.jpg link
    else if(imageCount = 3){sliderlink.href = "news3.html";} //img3.jpg link
    else if(imageCount = 4){sliderlink.href = "news4.html";} //img4.jpg link
    else if(imageCount = 5){sliderlink.href = "news5.html";} //img5.jpg link
}

window.setInterval(function imgA() {
    var image = document.getElementById('image');
    imageCount = imageCount + 1;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;} 
    image.src = "images/img"+ imageCount +".jpg";
    var sliderlink = document.getElementById("slider_link");
    if(imageCount = 2){sliderlink.href = "news2.html";} //img2.jpg link
    else if(imageCount = 3){sliderlink.href = "news3.html";} //img3.jpg link
    else if(imageCount = 4){sliderlink.href = "news4.html";} //img4.jpg link
    else if(imageCount = 5){sliderlink.href = "news5.html";} //img5.jpg link
},5000);

这是我的javascript代码，我使用它的ID在一个标签中创建一个变量，然后只添加4 else if语句并为正确的图像编号添加正确的页面。我基本上添加了从＆＃34; var sliderlink＆＃34;到以前工作的滑块。

我遇到的问题是html只会在循环中更改一次并永远停留在该页面上（news2.html）。一旦我点击图像并定向到页面，整个幻灯片开始表现得很奇怪，而不是按照图像顺序等。

我很抱歉，如果代码看起来有点笨拙和无组织，但希望你能理解我做错了什么。

Answer 1

您的ifs使用的是=运算符，而不是==或===运算符。试试这个：

if(imageCount === 2){sliderlink.href = "news2.html";} //img2.jpg link
else if(imageCount === 3){sliderlink.href = "news3.html";} //img3.jpg link
else if(imageCount === 4){sliderlink.href = "news4.html";} //img4.jpg link
else if(imageCount === 5){sliderlink.href = "news5.html";} //img5.jpg link

此外，在setInterval调用中，您不应该尝试命名传递给它的函数。尝试：

window.setInterval(function() {

而不是

window.setInterval(function imgA() {

试图更改<a> tag</a>的href

1 个答案: