源代码：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="图片滚动.css" rel="stylesheet" type="text/css" /> </head> <body> <center><div id="yuan" style="background-image:url(5b7677ff34d10d532e2e2120%5B1%5D.jpg);"> <div class="anniu" id="a1" onclick="dodo(-1)"><img src="左.png"/></div> <div class="anniu" id="a2" onclick="dodo(1)"><img src="右.png"/></div> </div></center> </body> </html> <script> var tp=new Array(); tp[0]="url(5b7677ff34d10d532e2e2120%5B1%5D.jpg)"; tp[1]="url(7d570b1bd10d24b2e8248820%5B1%5D.jpg)"; tp[2]="url(7fddd405dfd30680267fb511%5B1%5D.jpg)"; var ht=document.getElementById("yuan"); var a=0; var b=0; function h() { a++; if(a==tp.length) { a=0; } ht.style.backgroundImage=tp[a]; if(b==0) { var id=window.setTimeout("h()",2000); } } function dodo(m) { a=1; a=a+m; if(a<0) { a=tp.length-1; } else if(a>=tp.length) { a=0; } ht.style.backgroundImage=tp[a]; } window.setTimeout("h()",2000); </script>
css 样式表：
@charset "utf-8"; /* CSS Document */ <style type="text/css"> * { margin:0px auto; padding:0px; } #yuan { width:800px; height:550px; background-repeat:no-repeat; } .anniu { background-color:#000; background-position:center; background-repeat:no-repeat; opacity:0.6; width:50px; height:80px; } #a1 { float:left; margin:280px 0px 0px 10px; } #a2 { float:right; margin:280px 20px 0px 0px; } </style>
