<style>
img{
    height:150px;
    width:150px;
	transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
img:hover{
	height:250px;
    width:250px;
	transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
}
img{
    transition: 1s;
}
*{ margin:0; padding:0; list-style:none;}    
#box{ width:840px; border:0px solid #000; height:250px; margin:30px auto; position:relative; overflow:hidden;}    
#box ul{ position:absolute; left:0; top:0;}    
#box ul li{ width:150px; height:150px; float:left; padding:5px;} 
</style>
<script>    
window.onload=function(){    
    var oBox=document.getElementById('box');    
    var oUl=oBox.children[0];    
    var aLi=oUl.children;        
    oUl.innerHTML+=oUl.innerHTML;    
    oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';    
    setInterval(function(){    
        var l=oUl.offsetLeft+10;    
        if(l>=0){    
            l=-oUl.offsetWidth/2;    
        }    
        oUl.style.left=l+'px';    
    },120);    
};    
</script>

<div id="box">    
    <ul>    
       <li><img src="http://qiuxianrenren.com/uploads/image/20170916/8e57890b8b3adf79baeea69d7626287a.gif"></li>    
       <li><img src="http://qiuxianrenren.com/uploads/image/20170916/f8f035585d5cbd67aeca54d9cc1db863.gif"></li>    
       <li><img src="http://qiuxianrenren.com.com/uploads/image/20170916/151e976b12fb25fa2b3280f05afa856c.gif"></li>    
       <li><img src="http://qiuxianrenren.com.com/uploads/image/20170916/f8f035585d5cbd67aeca54d9cc1db863.gif"></li>
       <li><img src="http://qiuxianrenren.com.com/uploads/image/20170916/151e976b12fb25fa2b3280f05afa856c.gif"></li>  
    </ul>            
</div>