实现的效果就是 一排图片自动横向滚动,鼠标指向的时候,暂定滚动,鼠标离开,继续滚动

首先看下html代码:随便加入四张图片

<div id="div1">
			<ul>
				<li><img src="img/logo-black.png" alt=""></li>
				<li><img src="img/logo-black.png" alt=""></li>
				<li><img src="img/logo-black.png" alt=""></li>
				<li><img src="img/logo-black.png" alt=""></li>

			</ul>
		</div>

CSS代码:

*{
				margin: 0;
				padding: 0;
			}
			#div1{
				width: 712px;
				height: 108px;
				margin: 100px auto;
				position: relative;
				overflow: hidden;
				 
			}
			#div1 ul{
				position:absolute;
				left: 0;
				top: 0;
			}
			#div1 ul li {
				float: left;
				width: 178px;
				height: 108px;
				list-style: none;
				margin-left: 10px;
			}

JS代码:

<script>
			window.onload=function(){
				var oDiv  =  document.getElementById('div1');
				var oUl = document.getElementsByTagName('ul')[0];
				var Li = oUl.getElementsByTagName('li');//获取ul下的所有li
				oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;//li下的内容进行想加
				oUl.style.width = Li[0].offsetWidth*Li.length+'px';//ul的宽度等于每个li的宽度乘以所有li的长度
				var speed = 2
				
				//主方法
				function move(){
					//如果左边横向滚动了长度一半之后,回到初始位置
					
					if(oUl.offsetLeft<-oUl.offsetWidth/speed){
						oUl.style.left = '0'
					}
					//如果右边横向滚动的距离大于0 就让他的位置回到一半
					if(oUl.offsetLeft>0){
						oUl.style.left = -oUl.offsetWidth/speed+'px';
					}
					//oUl.style.left = oUl.offsetLeft-2+'px';//进行左横向滚动
					oUl.style.left = oUl.offsetLeft+speed+'px';//进行右横向滚动
				}
				//调用方法
				var timer = setInterval(move,30)
				//鼠标指向的时候 暂停
				oDiv.onmouseover=function(){
					clearInterval(timer);
				}	
				//鼠标离开之后 继续滚动
				oDiv.onmouseout=function(){
					 timer = setInterval(move,30)
				}
				
				

			}
		</script>

主要思路就是,给一个延时定时器,根据offsetLeft的变化进行横向滚动,代码的讲解都在注释中,快来试一下吧