JSスライダーのJavaScript配列へのHTMLリンクの作成

Question

私は作成したコンテンツスライダー用のJavaScriptを含むscript.jsファイルの配列にリンクするために自分のウェブサイトにリンクを作成します。別のスライダーである私のアレイの1つにリンクするには

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

：

アイデアは、このHTMLからリンクをクリックすることです。 は下記見：

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