javaScript实现图片滚动

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

原创最新推荐文章于 2019-03-12 17:23:22 发布 · 841 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现的简单图片轮播效果。通过不断更新图片的位置来达到轮播目的，同时利用鼠标悬停暂停轮播的功能增强用户体验。文中详细展示了如何设置页面样式，并通过JavaScript控制图片滚动速度。

<!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.onload=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.onmouseover=function(){
         clearInterval(timerId);
     }
     oUl.onmouseout=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>