1、方框是图片显示区域，初始化入下图状态，显示图片从右往左移动。所有图片的宽度总和大于图片显示区域的宽度。
3、打开eclipse工具，新建一个web的项目，项目的名称为gundongtp.接下来新一个页面。
5、在gundongtp.html中，输入css的状态，显示区域，图片区域。#xsqu鲻戟缒男yu{ border-radius:3px 3px 3px 3px稆糨孝汶; border: 1px solid #DCDCDC; width:1100px; height:260px; display: block; margin-left: auto; margin-right: auto; margin-top:5px; position: relative; overflow: hidden; white-space:nowrap; background:#F8F8F8;}#tpquyu{ border-radius:3px 3px 3px 3px; border: 1px solid #DCDCDC; padding: 10px; position: absolute; margin-top:5px; background:#FFF; width: 270px; height: 200px;}
7、在<head>这个区域内，编写javascript;window.onload = function(){ gundongtp();};function gundongtp(){ var xsqy = document.getElementById("xsquyu"); var imgarray=new Array(5); for(var i=0;i<imgarray.length;i++){ var xsimg=document.createElement("img"); xsimg.setAttribute("id","tpquyu"); xsimg.setAttribute("src","tupian/tp"+i+".jpg"); xsimg.style.left=300*i+"px"; xsqy.appendChild(xsimg); imgarray[i]=xsimg; xsimg.onmouseover = function() { clearInterval(timer); } xsimg.onmouseout = function() { timer=setInterval(fnMove,50); } } var timer = null; function fnMove() { var yidong=3; var zdleft=0; for(var i=0;i<imgarray.length;i++){ imgarray[i].style.left=imgarray[i].offsetLeft-yidong+"px"; if(imgarray[i].offsetLeft>zdleft){ zdleft=imgarray[i].offsetLeft; } } for(var i=0;i<imgarray.length;i++){ if((imgarray[i].offsetLeft+imgarray[i].offsetWidth)<=0){ if((zdleft+300)>1100){ imgarray[i].style.left=zdleft+300+"px"; }else{ imgarray[i].style.left=1100+"px"; } } } } timer=setInterval(fnMove,50)}
