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

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

P.S。这是我正在研究的网站http://hghazni.com/ihe/

干杯！

Answer 1

我明白了。我刚刚为数组变量中的每个值创建了一个函数，它重置滑块计数和滑块间隔时间。然后抓住了相关的元素id。

＆＃13;

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];
}

＆＃13;

然后我最终在我的index.html上链接它们，如 this：

＆＃13;

<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>

＆＃13;

现在它有效！这很难，但我学到了很多东西！感谢那些指引我正确方向的人让我自己弄清楚。

此处的实时版本： http://hghazni.com/ihe

为JS Slider创建一个JavaScript数组的HTML链接

1 个答案: