在javascript中怎么做图片滚动？

2021-06-04 10:16:48 浏览数 (6432)

今天我们来说说“在javascript中怎么做图片滚动？”。那么我们要搞清楚这个的原理。我们设计一个图片滚动的话原理是通过复制ul标签的内容，让它实现一个左右的滚动。我们来看看接下来怎么做吧！

1.首先我们通过设置一个网页框架代码如下：

<html>
	<head>
		<meta charset="utf-8" />
		<title>javascript怎么做图片滚动</title>
	</head>
	<link rel="stylesheet" href="css/gundong.css" />
	<script type="text/javascript"src="js/gundong.js"></script>
	<body>
		<div id="div1">
		      <ul>
		         <li><img src="img/GIF-1.png"></li>
		          <li><img src="img/gif-2.png"></li>
		        <li><img src="img/gif-3.png"></li>
		         <li><img src="img/gif-4.png"></li>
		     </ul>
		 </div>
		<a href="javascript:;">向左滚动</a>
		 <a href="javascript:;">向右滚动</a>
	</body>
</html>

这样我们就完成了一个网页的框架内容，我们也设置了一个css的外联式和JavaScript的外联式的语句。

2.设置css样式完成静态页面的设置，代码如下：

body,
div,
ul,
li,
p {
	padding: 0;
	margin: 0;
}

#div1 {
	position: relative;
	margin: 10px auto;
	border: 1px solid black;
	width: 680px;
	height: 170px;
	overflow: hidden;
}

#div1 ul {
	position: absolute;
	left: 0;
}

#div1 ul li {
	float: left;
	padding: 10px;
	list-style: none;
	width: 150px;
	height: 150px;
}

#div1 ul li img {
	width: 150px;
	height: 150px;
}

当我们完成这个步骤的时候就会得到一个静态的页面，那么接下来就是让页面动起来。

3.添加javascript的内容实现一个页面效果代码如下：

 window.onload = function()
  {
      var oDiv = document.getElementById("div1");
      var oUl = document.getElementsByTagName("ul")[0];
      var oLi = document.getElementsByTagName("li");
      var oA = document.getElementsByTagName("a");
      var timer = null;
      var iSpeed = 8;
      //复制一遍ul
      oUl.innerHTML +=oUl.innerHTML;
      //ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度
      oUl.style.width = oLi.length*oLi[0].offsetWidth + "px";
      function fnMove()
      {
          //图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度
          if (oUl.offsetLeft<-oUl.offsetWidth/2)
          {
              //将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点
              oUl.style.left = 0;
          }
          //图片向右移动时的条件，即在div里的ul的offsetLeft大于等于0
          else if (oUl.offsetLeft>=0)
         {
              //将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点
             oUl.style.left = -oUl.offsetWidth/2 + "px";
          }
          //给ul一个速度让整个ul的offsetLeft增加或减少，速度为正则向右移动，速度为负则向左移动
          oUl.style.left = oUl.offsetLeft +iSpeed + "px";
     }
      //点击向左滚动即触发第一个a元素标签
      oA[0].onclick = function()
      {
          iSpeed = -8;
      }
      //点击向右滚动即触发第二个a元素标签
      oA[1].onclick = function()
      {
          iSpeed = 8;
      }
      //当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
      oDiv.onmouseover = function()
      {
         clearInterval(timer);
     }
      //当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
     oDiv.onmouseout = function()
      {
          timer=setInterval(fnMove,30);
      }
  }

在代码中我们通过设置函数，在页面中我们可以通过点击向那个方向滚动从而实现，滚动的一个方向（默认是向右）。而且当我们鼠标停留在滚动的图片时会停止滚动。

总结：

上面就是一个有关于在javascript中怎么做图片滚动？的一个方法，当然如果你有更好更简便的方式也可以和大家一起分享噢！更多的一个有关于学习前端的知识，我们都可以在W3cschool中进行学习。