Question

网页怎样循环显示图片，JS。

按左右按钮的时候会变成这样显示。总共5张图片，要实现他们的循环显示 。
不要使用外部JS。用简单的原生JS。





Answer 1

可以测试一下以下代码：

<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 = 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>

</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="图片地址" selected>图片
<option value="图片地址">图片
<option value="图片地址">图片
<option value="图片地址">图片
<option value="图片地址">图片
<option value="图片地址">图片
<option value="图片地址">图片
<option value="图片地址">图片
<option value="图片地址">图片
<option value="图片地址">图片
</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>

JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。

Answer 2

追问

谢谢 。不过我需要简单JS出来的 。外部的JS太长了。用原生的JS会吗

追答

会哦，不过恐怕写出来更长了，因为查找元素很麻烦的。光是这些代码就很长了，然后还要自己定义setInterval什么的，还要控制的好，另外告诉你基本的道理：

你最开始的时候,打比方，一个ul里面的li里面的img
你循环每个img，每个img给个属性index，各自的索引。

var currentIndex=0;// 最开始，当前显示的索引
onload=function(){
var imgs = ...;

for(var i =0;i<imgs.length;i++){
imgs[i].index=i;

}

//点击按钮当前索引改变，currentIndex

// 后面根据你的需求

for(var i=currentIndex;i<imgs.length;i++){
// 把这些imgs，重新append到父元素中

}

for(var i=0;i<currentIndex;i++){
// 同上

}

}

我附件里，有这段代码，原理都差不多的，其实。

我发现你的需求其实更简单，只要把最后的一个img追加到第一个img的前面就好了，每次点击都是这样，这个是右边的按钮，左边的按钮恰好相反。