图片翻页幻灯效果
2009-11-23 18:50
260 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> </head> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <mce:style type="text/css"><!-- select {}{ font-family: "tahoma"; font-size: 10px; color: #666666} input {}{ font-family: "tahoma"; font-size: 10px; color: #000000; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} --></mce:style><style type="text/css" mce_bogus="1"> select {}{ font-family: "tahoma"; font-size: 10px; color: #666666} input {}{ font-family: "tahoma"; font-size: 10px; color: #000000; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}</style> <script type="text/javascript"> var rotate_delay = 1000; // delay in milliseconds (5000 = 5 secs) current = 0; function next() { if (document.slideform.slide[current+1]) { document.images.show.src = document.slideform.slide[current+1].value; document.slideform.slide.selectedIndex = ++current; } else first(); } function previous() { if (current-1 >= 0) { document.images.show.src = document.slideform.slide[current-1].value; document.slideform.slide.selectedIndex = --current; } else last(); } function first() { current = 0; document.images.show.src = document.slideform.slide[0].value; document.slideform.slide.selectedIndex = 0; } function last() { current = document.slideform.slide.length-1; document.images.show.src = document.slideform.slide[current].value; document.slideform.slide.selectedIndex = current; } function ap(text) { document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop"; rotate(); } function change() { current = document.slideform.slide.selectedIndex; document.images.show.src = document.slideform.slide[current].value; } function rotate() { if (document.slideform.slidebutton.value == "Stop") { current = (current == document.slideform.slide.length-1) ? 0 : current+1; document.images.show.src = document.slideform.slide[current].value; document.slideform.slide.selectedIndex = current; window.setTimeout("rotate()", rotate_delay); } } </SCRIPT> <body bgcolor="#ffffff" text="#000000"> <form name="slideform"> <table cellspacing="1" cellpadding="4" bgcolor="#000000"> <tr> <td align="center" bgcolor="white" width="200" height="200"> <img src="images/add.png" mce_src="images/add.png" name="show"> </td> </tr> <tr> <td align="center" bgcolor="#c0c0c0"> <select name="slide" onChange="change();"> <option value="images/add_user.png" selected>1</option> <option value="images/back.png">2</option> <option value="images/bing.png">3</option> <option value="images/chart_up.png">4</option> <option value="images/person.png">5</option> <option value="images/new.png">6</option> <option value="images/info.png">7</option> <option value="images/edit_profile.png">8</option> <option value="images/edit_profile.png">9</option> <option value="images/view.png">10</option> </select> </td> </tr> <tr> <td align="center" bgcolor="#c0c0c0"> <input type="button" onClick="first();" value="|<<" title="Beginning"> <input type="button" onClick="previous();" value="<<" title="Previous"> <input type="button" name="slidebutton" onClick="ap(this.value);" value="开始" title="AutoPlay"> <input type="button" onClick="next();" value=">>" title="Next"> <input type="button" onClick="last();" value=">>|" title="End"> </td> </tr> </table> </form> </body> </html>
相关文章推荐
- 图片翻页的幻灯效果
- 图片翻页幻灯效果
- 图片翻页幻灯效果
- 使用fancy slide在drupal中添加幻灯图片效果
- 点图片上一页下一页翻页效果
- JS+CSS实现淡入式焦点图片幻灯切换效果的方法
- jQuery 图片翻页展示效果 Awesome flipping page gallery
- js+css打造的仿土豆网带缩略图的图片幻灯切换效果
- 图片翻页效果引出的animate.css,很好玩,多动动吧~
- JS切换图片幻灯切换效果
- 分享5个来自tympanus的超炫图片幻灯效果和教程
- JS模仿腾讯图片站的图片翻页按钮效果完整实例
- 挑战1:使用jQuery生成水平图片幻灯效果
- 首页图片效果:翻页
- 使用viewpager嵌套实现上下左右滑动切换图片(IOS双向滚动翻页效果相同)
- [iphone开发私房菜_6_] 完美实现各种图片翻页浏览效果
- 调用图片幻灯切换效果js代码
- 使用viewpager嵌套实现上下左右滑动切换图片(IOS双向滚动翻页效果相同)
- 分享5个来自tympanus的超炫图片幻灯效果和教程