javaScript实现图片滚动

最新推荐文章于 2019-03-12 17:23:22 发布

回_憶

最新推荐文章于 2019-03-12 17:23:22 发布

阅读量829

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/angjunqiang/article/details/41489059

版权

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" >
<title>Demo Text</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#frame{width: 752px;height: 180px;position: absolute;margin:60px 60px;border: 1px solid green;overflow: hidden;}
#frame ul{position: absolute;}
#frame ul li{width: 188px;height: 180px;float: left;list-style: none;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
     var oDiv=document.getElementById('frame');
     var oUl=document.getElementById('ul1');
     oUl.innerHTML+=oUl.innerHTML;
     oUl.style.width=oUl.getElementsByTagName('li').length*188+'px';
     var timerId=null;
     timerId=setInterval(function(){
        move(5);
     },50);	
     oUl.οnmοuseοver=function(){
         clearInterval(timerId);
     }
     oUl.οnmοuseοut=function(){
         timerId=setInterval(function(){
     	 move(5);
     	 },30);
    }
function move(speed){
         var pad=oUl.offsetLeft;
     	 if(pad>=0){
           oUl.style.left=-oUl.offsetWidth/2+'px';
     	 }
     	 if(pad<=-oUl.offsetWidth/2){
             oUl.style.left=0;
     	 }
     	 oUl.style.left=oUl.offsetLeft+speed+'px';
     };
};	
</script>
</head>
<body>
<div id="frame">
	<ul id="ul1">
		<li><img src="./images/test/1.jpg"/></li>
		<li><img src="./images/test/2.jpg"/></li>
		<li><img src="./images/test/3.png"/></li>
		<li><img src="./images/test/4.jpg"/></li>
	</ul>
</div>
</body>
</html>