javascript中如何做图片滚动

发布时间:2022-02-23 09:26:39 作者:iii
来源:亿速云 阅读:138

这篇“javascript中如何做图片滚动”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javascript中如何做图片滚动”文章吧。

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中如何做图片滚动”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. vue如何实现图片滚动效果
  2. CSS3如何实现图片滚动播放效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:MySQL回表的性能消耗是多少

下一篇:在HTML5前端中如何学习meta viewport参数

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》