可以测试一下以下代码：
<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,以及更多的应用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<script type="text/javascript">
var img=new Array()
img[0]="img-1.jpg"
img[1]="img-2.jpg"
img[2]="img-3.jpg"
//图片可以自己增加
var index=0
function show(){
if(index>2){//图片增加了的话，这里2也要改
index=0
}
document.getElementById("images").src=img[index]
document.getElementById("images").title="图片"+(index+1)
index++
setTimeout("show()",1000)//1000毫秒是1秒，隔1秒换，2秒就是2000
}
</script>
<title>@title</title>
</head>
<body onload="show()">
<div>
<img id="images" src="image-1.jpg" title="图片1" />
</div>
</body>
</html>
给个思路吧,设装着所有图片的层为boxa,它的父层为boxb,
点击移动的时候你把boxa向左移一张图片的宽度就是了,也就是点击的时候更改boxa的margin-left为负数,
boxb要设置over-flow为hidden
,
boxa要足够长
