我正在尝试创建此页面，其中有一个 Iframe，并且我想添加一个按钮来显示 iframe 中的下一页，以及一个按钮来显示 iframe 中的上一页。
我总共有 4 个页面要在名为 1.html 2.html 3.html 4.html 的 iframe 中显示，我希望按钮从 1 到 4，然后返回到 1，依此类推。
草图是这样的：
_________
| IFRAME |
| |
___________
<<previous Next >>
这是我用来更改 iframe 内容的简单脚本
这是 iframe/按钮/功能。
<iframe id="screen" width="609" scrolling="no" height="410" frameborder="0" align="middle" name="canal" src="1.html"></iframe>
<input type="button" onclick="content2()" class="butonactual" value="See 2">
<script> function content2() { document.getElementById('screen').src = "2.html"; } </script>
Thanks
使用 Jquery
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var locations = ["1.html", "2.html", "3.html","4.html"];
var currentIndex = 0;
var len = locations.length;
$(document).ready(function(){
$(':button').click(function() {
currentIndex = this.value == "Next" ?
currentIndex < len - 1 ? ++currentIndex : len - 1 :
currentIndex > 0 ? --currentIndex : 0;
$('#frame').attr('src', locations[currentIndex]);
});
});
</script>
</head>
<body>
<input type = "button" value = "Previous" /> <input type = "button" value = "Next" />
<br />
<iframe id="frame" src="1.html"></iframe>
</body>
</html>
■Update
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var locations = ["1.html", "2.html", "3.html","4.html"];
var currentIndex = 0;
var len = locations.length;
$(document).ready(function(){
$(':button').click(function() {
currentIndex = this.value == "Next" ?
currentIndex < len - 1 ? ++currentIndex : 0 :
currentIndex > 0 ? --currentIndex : len - 1;
$('#frame').attr('src', locations[currentIndex]);
});
});
</script>
</head>
<body>
<input type = "button" value = "Previous" /> <input type = "button" value = "Next" />
<br />
<iframe id="frame" src="1.html"></iframe>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
