首页 > 代码库 > JS可控制的图片自动循环播放查看效果
JS可控制的图片自动循环播放查看效果
JS可控制的图片自动循环播放查看效果
<html>
<head>
<title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = http://www.mamicode.com/document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = http://www.mamicode.com/document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}<!--www.dyunr.com-->
function first() {
current = 0;
document.images.show.src = http://www.mamicode.com/document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = http://www.mamicode.com/document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}<!--www.dyunr.com-->
function ap(text) {
document.slideform.slidebutton.value = http://www.mamicode.com/(text =="Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = http://www.mamicode.com/document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value =http://www.mamicode.com/="Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = http://www.mamicode.com/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=0 height=150>
<img src="http://www.mamicode.com/images/m01.jpg" name="show" style="cursor:pointer;" onclick="javascript:window.open(this.src);" onl oad="return imgzoom(this,600);"/></td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="http://www.mamicode.com/images/m01.jpg" selected>图片1 红叶传情
<option value="http://www.mamicode.com/images/m02.jpg">图片2 野花绽放
<option value="http://www.mamicode.com/images/m03.jpg">图片3 往事如茶
<option value="http://www.mamicode.com/images/m04.jpg">图片4 油菜花开
<option value="http://www.mamicode.com/images/m05.jpg">图片5 玫瑰情思
<option value="http://www.mamicode.com/images/m06.jpg">图片6 玫瑰情思
<option value="http://www.mamicode.com/images/m07.jpg">图片7 玫瑰情思
<option value="http://www.mamicode.com/images/m08.jpg">图片8 玫瑰情思
<option value="http://www.mamicode.com/images/m09.jpg">图片9 哈萨雅琪
<option value="http://www.mamicode.com/images/m10.jpg">图片10 往事如茶
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<input type=button onClick="first();" value="http://www.mamicode.com/|<<" title="Beginning">
<input type=button onClick="previous();" value="http://www.mamicode.com/<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="http://www.mamicode.com/Start" title="AutoPlay">
<input type=button onClick="next();" value="http://www.mamicode.com/>>" title="Next">
<input type=button onClick="last();" value="http://www.mamicode.com/>>|" title="End">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
原文网址：http://www.csrcode.cn/article-3160-1.html
JS可控制的图片自动循环播放查看效果