タイマーに関して | 質問掲示板 | 独学!未経験からWebデザイナーになる!!

<script>
$(function(){
$("#start_btn").click(function(){
setInterval("nextItem()",1000);
});
})

// 現在の処理対象を保持する変数
var target;

// ラジオボタン/divの数を指定する（自動で取得するような方法もあります）
var labelTotal = 5;

function nextItem() {
if(isNaN(target)){
// targetの値が存在しないとき＝初回のみ
target = 0;
}else{
// 直前のdivに対する効果を削除する
$("#div" + target).css("border", "none");
if(target == labelTotal-1){
// 直前のtargetが最後のdivの場合は0に戻す
target = 0;
}else{
// それ以外は次のtargetにするためtarget+1する
target++;
}
}
// targetのラジオボタンをチェックする
$("#radio" + target).prop("checked",true);

// targetのdivに対する効果を付与する(ここでは線)
$("#div" + target).css("border", "1px solid #ff0000");
}
</script>

<ul>
<li><div id="div0">div0</div></li>
<li><div id="div1">div1</div></li>
<li><div id="div2">div2</div></li>
<li><div id="div3">div3</div></li>
<li><div id="div4">div4</div></li>
</ul>

<ul>
<li><input type="radio" name="btn_group" id="radio0">radio0</li>
<li><input type="radio" name="btn_group" id="radio1">radio1</li>
<li><input type="radio" name="btn_group" id="radio2">radio2</li>
<li><input type="radio" name="btn_group" id="radio3">radio3</li>
<li><input type="radio" name="btn_group" id="radio4">radio4</li>
</ul>

<button id="start_btn">start</button>