0

首先，我是一个完整的新手，所以请做出相应的回应......

我设法创建了一个 iframe，其中三个 html 页面每 1500 毫秒按顺序动态加载（www.online95.com/agency.html）

在加载到 iframe 中的每个 html 页面（/budget、html、volunteer.html 和 robust.html）上，我添加了一排圆圈（white=off 和 red=on），如果单击它们会将相应的页面加载到框架

问题是原始脚本未与单个 html 页面链接，因此无论您手动将哪个页面加载到 iframe 中或何时加载，原始序列都会继续每 1500 毫秒加载一次

我正在寻找一些脚本来在 /agency.html 上的原始 javascript 中保留变量，以便下一个动态页面加载将是页面手动加载后的页面，并将计时器休息到

我也希望能够添加一个暂停按钮

非常感谢

4

2 回答 2

1

Before answering your question, I have to say this is a really bad practice, you can use jQuery and a jQuery Slider Plugin, it will be more effective.

doing what you want is beeing more complicated with iframes, but you can do it. you should use iframe onload event for changing current page index(i),

here is how you can do,

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

And don't forget to set onload attribute for iframe,

<iframe id="agencyframe" onload="contentChanged(this)" src="/budget.html">
</iframe>

UPDATE:

As I understand you want to change iframe page when user click (page zero-page one-page two) on this page.

you can change location of a iframe like this,

document.getElementById("agencyframe").src = "/budget.html";

so change your function like this,

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:

Change contentChanged function like this,

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");
         } 
    }
}
于 2012-04-24T16:29:44.093 回答
0

我的建议是，不要在加载的页面上设置控件。如您所见，不同加载页面之间的脚本编写可能非常复杂，并且不是脚本的真正用途。

我会将控件保留在父页面上。position:absolute; z-index:2;您可以通过使用和top/bottom: XYZpx; left/right: ABCpx;正确定位它们（​​以及父对象position:relative）和正确的背景设置，使它们看起来重叠。

然后您需要做的就是将计时器存储在一个变量中 ( var timer = window.setTimeout(...)) 并在用户单击其中一个控件时取消它 ( controls.onclick = function(timer) { window.clearTimeout(timer); })

于 2012-04-24T15:17:48.153 回答