實現的效果就是 一排圖片自動橫向滾動,滑鼠指向的時候,暫定滾動,滑鼠離開,繼續滾動

首先看下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的變化進行橫向滾動,程式碼的講解都在註釋中,快來試一下吧