をクリックしたときに、私はこれがあると言っている、それをキャンセルしています本当に悪い練習、あなたはjQueryとjQuery Slider Pluginを使用することができます、それはより効果的です。
iframeでもっとうまくいくのですが、できます。あなたは
は
は
<iframe id="agencyframe" onload="contentChanged(this)" src="/budget.html">
</iframe>
、あなたが行うことができる方法である
<script type="text/javascript">
var pages=new Array();
pages[0]="/budget.html";
pages[1]="/voluntary.html";
pages[2]="/robust.html";
var i=0;
var time=4000; // this is set in milliseconds
var timer = false;
var timerSetter;
function pageChange() {
document.getElementById("agencyframe").src=pages[i];
i++;
if(i==pages.length) {
i=0;
}
timerSetter = setTimeout("pageChange()",time);
}
function contentChanged(e) {
if (!timer) { pageChange(); timer=true;}
if (timerSetter) {
clearTimeout(timerSetter);
timerSetter = setTimeout("pageChange()",time);
}
var newSrc = e.contentWindow.location.href;
for (var j=0; j < pages.length; j++) {
if (newSrc.match(pages[j])) {
i = j+1;
if(i==pages.length) {
i=0;
}
}
}
}
</script>
とiframeのためのonload属性を設定することを忘れないでくださいここ
、現在のページインデックス(i)を変更するためのiframeのonloadイベントを使用する必要があります
UPDATE:
私はあなたがインラインフレームのページを変更したい理解したように、ユーザーのクリック(ページゼロページ1ページ2)あなたはこのようなIFRAMEの場所を変更することができます
、
document.getElementById("agencyframe").src = "/budget.html";
はそう
function pageZero() {
document.getElementById("prin_div1").setAttribute("class", "prin_on");
document.getElementById("prin_div2").setAttribute("class", "prin_off");
document.getElementById("prin_div3").setAttribute("class", "prin_off");
document.getElementById("agencyframe").src = pages[0];
}
function pageOne() {
document.getElementById("prin_div1").setAttribute("class", "prin_off");
document.getElementById("prin_div2").setAttribute("class", "prin_on");
document.getElementById("prin_div3").setAttribute("class", "prin_off");
document.getElementById("agencyframe").src = pages[1];
}
function pageTwo() {
document.getElementById("prin_div1").setAttribute("class", "prin_off");
document.getElementById("prin_div2").setAttribute("class", "prin_off");
document.getElementById("prin_div3").setAttribute("class", "prin_on");
document.getElementById("agencyframe").src = pages[2];
}
、このようなあなたの機能を変更するUPDATE -2:よう
変更contentChanged
機能これは、
function contentChanged(e) {
if (!timer) { pageChange(); timer=true;}
if (timerSetter) {
clearTimeout(timerSetter);
timerSetter = setTimeout("pageChange()",time);
}
var newSrc = e.contentWindow.location.href;
for (var j=0; j < pages.length; j++) {
if (newSrc.match(pages[j])) {
i = j+1;
document.getElementById("prin_div"+i).setAttribute("class", "prin_on");
if(i==pages.length) {
i=0;
}
} else {
document.getElementById("prin_div"+(j+1)).setAttribute("class", "prin_off");
}
}
}
ご意見ありがとうございます。私はこれを考えましたが、問題はどのように動的にコントローラをオン/オフに切り替えるか、ページがコントローラから直接的に順番に動的にロードされるようになることになります。現時点では、コントローラーの3つのバリエーションがあり、表示されているページに対応しています。 –
コントローラーをクリックすると、クリックされたコントローラーがオン状態になります。オンのときにクラスを付ける)。それ以外の場合、setTimeoutによって呼び出される関数は、3つのコントローラの配列を回転し、対応するページをロードし、コントローラを 'on'に設定します。これは、ナビゲーションシステムをターゲットとし、オンラインで多くのリソースを見つけることができる一般的な問題です。 – Armatus