为JS滑翔机创建指向JavaScript数组的HTML链接

Question

因此，我想在我的网站中创建链接，链接到script.js文件中的数组，这是我创建的内容滑块的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>

​

链接到我的数组之一，这是一个单独的滑块。，如下所示：

​

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

​

这有可能吗？如果没有，有解决办法吗？

附注：这是我在http://hghazni.com/ihe/上工作的网站

干杯!

Answer 1

我想通了。我只是为数组变量中的每个值创建了一个函数，该函数重置滑块计数和滑块间隔时间。然后抓起相关元素的身份证。

​

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上，就像：

​

<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