javascript - 为 JS slider 制作指向 JavaScript 数组的 HTML 链接

Question

所以我想在我的网站中创建链接以链接到 script.js 文件中的数组，该文件包含我创建的内容 slider 的 JavaScript。

想法是单击此 html 中的链接:

    <div id="slider">
      <h2 id="sliderHeader">Social Determinants of Health</h2>
      <p>______________________</p>
      <p id="sliderPara">In terms of health - good quality health care is a determinant of health, and access, affordability, and acceptability of health are all socially determined. But most social determinants of health lie outside the health care system.</p>
      <a href="#"><input class="readmore_button" type="submit" value="Read more" /></a>
    </div>

    <div class="slider_menu">
      <ul>
        <li><a href="#">Social Determinants of Health</a></li>
        <li><span style="color:#fff;">|</span></li>
        <li><a href="#">Monitoring Progress</a></li>
        <li><span style="color:#fff;">|</span></li>
        <li><a href="#">What Works</a></li>
        <li><span style="color:#fff;">|</span></li>
        <li><a href="#">Making it Happen</a></li>
      </ul>
    </div>

链接到我的数组之一，它是一个单独的 slider 。 如下所示:

var headArray= ['Social Determinants of Health',
'Monitoring Progress',
'What Works',
'Making it Happen'];

这可能吗？如果没有，是否有解决方法？

附注这是我正在处理的网站 http://hghazni.com/ihe/

干杯!

Answer 1

我想通了。我刚刚为数组变量中的每个值创建了一个函数，该函数重置了 slider 计数和 slider 间隔时间。然后抓取相关的元素 id。

function slider_link_1() {
  cnt = 0;
  timer = setInterval(slider, 5000);
  var slider = document.getElementById('slider');
  slider.style.backgroundImage = "url(\'" + imgadr[cnt] + "\')";
  document.getElementById('sliderHeader').innerHTML = headArray[0];
  document.getElementById('sliderPara').innerHTML = paraArray[0];
}

function slider_link_2() {
  cnt = 1;
  timer = setInterval(slider, 5000);
  var slider = document.getElementById('slider');
  slider.style.backgroundImage = "url(\'" + imgadr[cnt] + "\')";
  document.getElementById('sliderHeader').innerHTML = headArray[1];
  document.getElementById('sliderPara').innerHTML = paraArray[1];
}

function slider_link_3() {
  cnt = 2;
  timer = setInterval(slider, 5000);
  var slider = document.getElementById('slider');
  slider.style.backgroundImage = "url(\'" + imgadr[cnt] + "\')";
  document.getElementById('sliderHeader').innerHTML = headArray[2];
  document.getElementById('sliderPara').innerHTML = paraArray[2];
}

function slider_link_4() {
  cnt = 3;
  timer = setInterval(slider, 5000);
  var slider = document.getElementById('slider');
  slider.style.backgroundImage = "url(\'" + imgadr[cnt] + "\')";
  document.getElementById('sliderHeader').innerHTML = headArray[3];
  document.getElementById('sliderPara').innerHTML = paraArray[3];
}

然后我最终将它们链接到我的 index.html 上，例如 this:

<div class="slider_menu">
  <ul>
    <li><a href="#" onclick="slider_link_1()">Social Determinants of Health</a>
    </li>
    <li><span style="color:#fff;">|</span>
    </li>
    <li><a href="#" onclick="slider_link_2()">Monitoring Progress</a>
    </li>
    <li><span style="color:#fff;">|</span>
    </li>
    <li><a href="#" onclick="slider_link_3()">What Works</a>
    </li>
    <li><span style="color:#fff;">|</span>
    </li>
    <li><a href="#" onclick="slider_link_4()">Making it Happen</a>
    </li>
  </ul>
</div>

现在可以了!这很难，但我学到了很多东西!感谢那些为我指出正确方向的人，让我自己弄明白了。

现场版在这里: http://hghazni.com/ihe