Ala*_*ust 5 html javascript iframe jquery button
我正在尝试创建此页面,其中我有一个iframe,我想添加一个按钮来显示iframe中的下一页,以及一个按钮,用于显示iframe中的上一页.
我总共有4页在iframe中显示名为1.html 2.html 3.html 4.html,我希望按钮工作从1到4然后再回到1等等.
草图是这样的:
_________
| IFRAME |
| |
___________
<<previous Next >>
这是我用来更改iframe内容的简单脚本
这是iframe/Button /功能.
<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>
谢谢
使用 Jquery
\n\n<html>\n<head>\n<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>\n<script>\n var locations = ["1.html", "2.html", "3.html","4.html"];\n var currentIndex = 0;\n var len = locations.length;\n $(document).ready(function(){\n $(\':button\').click(function() {\n currentIndex = this.value == "Next" ? \n currentIndex < len - 1 ? ++currentIndex : len - 1 : \n currentIndex > 0 ? --currentIndex : 0;\n $(\'#frame\').attr(\'src\', locations[currentIndex]);\n });\n });\n</script>\n</head>\n<body>\n<input type = "button" value = "Previous" /> <input type = "button" value = "Next" />\n<br />\n<iframe id="frame" src="1.html"></iframe>\n</body>\n</html>\n\xe2\x96\xa0更新
\n\n<html>\n <head>\n <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>\n <script>\n var locations = ["1.html", "2.html", "3.html","4.html"];\n var currentIndex = 0;\n var len = locations.length;\n $(document).ready(function(){\n $(\':button\').click(function() {\n currentIndex = this.value == "Next" ? \n currentIndex < len - 1 ? ++currentIndex : 0 : \n currentIndex > 0 ? --currentIndex : len - 1;\n\n $(\'#frame\').attr(\'src\', locations[currentIndex]);\n });\n });\n </script>\n </head>\n <body>\n <input type = "button" value = "Previous" /> <input type = "button" value = "Next" />\n <br />\n <iframe id="frame" src="1.html"></iframe>\n </body>\n</html>\n| 归档时间： |
|
| 查看次数： |
5707 次 |
| 最近记录： |