<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>


<script>


             

var id;

window.onload = function(){

start();

}

var pps; 

var x;

var pss;

var xtt;

var t;

var pst;

pps = document.getElementById("pp");


pps.style.left="150px";


function start(){

pps = document.getElementById("pp");

pps.style.left="150px";

x=document.getElementById("tt");

pss = pps.offsetLeft;

xtt = x.offsetLeft;

    t =pps.offsetWidth;

pst = x.offsetWidth;



id = setInterval(function(){

      xtt--;

      x.style.left=xtt+"px";

    if(xtt+pst<0){

     

    xtt=t;

     

    }  

 

},10);

} 


function stop() {

clearInterval(id);

}


</script>

<style>

#pp{


width:900px;

height:155px;

position:relative;

 overflow:hidden;

background-color:grey;

}



#tt{


position:absolute;


 width:600px;

 height:150px;



}


#tt1{

float:left;

background-color:blue;

width:200px;

height:140px;



}

#tt2{

float:left;

background-color:yellow;

width:200px;

height:140px;



}

#tt3{

float:left;

background-color:red;

width:200px;

height:140px;




}


</style>

<body>

<div id="pp">

   <div id="tt" οnmοuseοver="stop();"

οnmοuseοut="start();">

   <div id="tt1"><img src="图片1路径"/>1</div>

   <div id="tt2"><img src="图片2路径"/>2</div>

   <div id="tt3"><img src="图片3路径"/>3</div></div></div>

</body>


</html>