CSS style not synchronizing with Javascript
I would prefer not to use jquery just for simplicity. I have three websites which one page cycles through. I want the webpages to be scaled each by a different scalar value. I tried applying a class to each page but with the switch statement it's supposed to zoom 2x on google 4x on yahoo and .5x on ebay. However, when I run the code it will go google at zoom 2x. Then it goes to yahoo at .5x then ebay at .5x zoom. I don't care about efficiency, it's only going to be three pages this scrolls through so it can be hardcoded. Thanks
<style>
#wrap { width: 1390px; height: 690px; padding: 0; overflow: hidden; }
#frame.first { width: 1390px; height: 690px; border: 0px soli开发者_如何学God black; }
#frame.first { zoom: 2; -moz-transform: scale(2); -moz-transform-origin: 0 0; }
#frame.second { width: 1395px; height: 695px; border: 0px solid black; }
#frame.second { zoom: 4; -moz-transform: scale(1); -moz-transform-origin: 0 0; }
#frame.third { width: 1395px; height: 695px; border: 0px solid black; }
#frame.third { zoom: .5; -moz-transform: scale(1); -moz-transform-origin: 0 0; }
</style>
<script type="text/javascript">
var frames = Array('http://www.google.com, 5,
'http://www.yahoo.com', 5,
'http://www.ebay.com', 5);
var i = 0, len = frames.length;
function ChangeSrc()
{
if (i >= len) { i = 0; }
switch(i)
{
case 0:
document.getElementById('frame').className = 'first';
document.getElementById('frame').className
break;
case 1:
document.getElementById('frame').className = 'second';
document.getElementById('frame').className
break;
case 2:
document.getElementById('frame').className = 'third';
document.getElementById('frame').className
break;
}
document.getElementById('frame').src = frames[i++];
setTimeout('ChangeSrc()', (frames[i++]*1000));
}
window.onload = ChangeSrc;
</script>
</head>
<body>
<div id="wrap">
<iframe src="" class="" id="frame" scrolling="no" frameborder="0"></iframe>
</div>
</body>
</html>
Your variable should NOT be named frames. You are messing up window.frames when you name the var frames. Name it to something else.
Using a for loop is wrong thing to use here since it will not give you any time for the pages to load. You probably want to use setTimeout to call each iteration.
I'm not sure if this is what is causing your issue but you seem to be missing a closing quotation on Google:
var frames = Array('http://www.google.com, 5,
'http://www.yahoo.com', 5,
'http://www.ebay.com', 5);
should be:
var frames = Array('http://www.google.com', 5,
'http://www.yahoo.com', 5,
'http://www.ebay.com', 5);
加载中,请稍侯......
精彩评论