製作一個HTML鏈接到JS滑塊的JavaScript數組

Question

所以我想在我的網站上創建鏈接以鏈接到script.js文件中的數組，這是我創建的內容滑塊所包含的JavaScript的位置。

的想法是從點擊這個網站的鏈接：

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

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