jS循环图片

这篇博客介绍了一段JavaScript代码,用于实现网页中图片的自动循环播放功能。用户可以选择手动切换图片或者启动自动播放,代码中包含了开始、停止、上一张、下一张等操作,并通过`setTimeout`函数设置延迟来实现平滑的轮播效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  在<body></body>中输入代码:<SCRIPT LANGUAGE="JavaScript"><!-- Beginvar rotate_delay = 5000; // 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);}}// End --></script><center><form name=slideform><table cellspacing=1 cellpadding=4 bgcolor="#000000"><tr><td align=center bgcolor="white"><b>图片循环</b></td></tr><tr><td align=center bgcolor="white" width=200 height=150><img src="photo/cart.gif" name="show"></td></tr><tr><td align=center bgcolor="#C0C0C0"><select name="slide" onChange="change();"><option value="photo/cart.gif" selected>车子<option value="photo/aat.gif">防空坦克<option value="photo/boat.gif">汽艇<option value="photo/enterprise.gif">Enterprise<option value="photo/ewing.gif">E-Wing<option value="photo/f18.gif">F-18<option value="photo/klingon.gif">Klingon<option value="photo/landingcraft.gif">太空飞船<option value="photo/hoverracer.gif">Hover Racer<option value="photo/sith.gif">Sith</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="Start" title="AutoPlay"><input type=button onClick="next();" value=">>" title="Next"><input type=button onClick="last();" value=">>|" title="End"></td></tr></table></form></center>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值