javascript中如何做圖片滾動(dòng)

發(fā)布時(shí)間：2022-02-23 09:26:39 來(lái)源：億速云閱讀：139 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇“javascript中如何做圖片滾動(dòng)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“javascript中如何做圖片滾動(dòng)”文章吧。

1.首先我們通過(guò)設(shè)置一個(gè)網(wǎng)頁(yè)框架代碼如下：

<html>
	<head>
		<meta charset="utf-8" />
		<title>javascript怎么做圖片滾動(dòng)</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:;">向左滾動(dòng)</a>
		 <a href="javascript:;">向右滾動(dòng)</a>
	</body>
</html>

這樣我們就完成了一個(gè)網(wǎng)頁(yè)的框架內(nèi)容，我們也設(shè)置了一個(gè)css的外聯(lián)式和JavaScript的外聯(lián)式的語(yǔ)句。

2.設(shè)置css樣式完成靜態(tài)頁(yè)面的設(shè)置，代碼如下：

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;
}

當(dāng)我們完成這個(gè)步驟的時(shí)候就會(huì)得到一個(gè)靜態(tài)的頁(yè)面，那么接下來(lái)就是讓頁(yè)面動(dòng)起來(lái)。

3.添加javascript的內(nèi)容實(shí)現(xiàn)一個(gè)頁(yè)面效果代碼如下：

 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;
      //復(fù)制一遍ul
      oUl.innerHTML +=oUl.innerHTML;
      //ul的寬度是所有l(wèi)i寬度之和，復(fù)制ul之后的整個(gè)ul的寬度就是li的長(zhǎng)度乘以一個(gè)li的寬度
      oUl.style.width = oLi.length*oLi[0].offsetWidth + "px";
      function fnMove()
      {
          //圖片向左移動(dòng)時(shí)的條件，即在div里的ul的offsetLeft小于一個(gè)ul的寬度
          if (oUl.offsetLeft<-oUl.offsetWidth/2)
          {
              //將整個(gè)復(fù)制的ul向右拖拽直至整個(gè)ul中的第一張圖歸位到起點(diǎn)
              oUl.style.left = 0;
          }
          //圖片向右移動(dòng)時(shí)的條件，即在div里的ul的offsetLeft大于等于0
          else if (oUl.offsetLeft>=0)
         {
              //將整個(gè)復(fù)制的ul向左拖拽直至整個(gè)ul中的第一張圖歸位到起點(diǎn)
             oUl.style.left = -oUl.offsetWidth/2 + "px";
          }
          //給ul一個(gè)速度讓整個(gè)ul的offsetLeft增加或減少，速度為正則向右移動(dòng)，速度為負(fù)則向左移動(dòng)
          oUl.style.left = oUl.offsetLeft +iSpeed + "px";
     }
      //點(diǎn)擊向左滾動(dòng)即觸發(fā)第一個(gè)a元素標(biāo)簽
      oA[0].onclick = function()
      {
          iSpeed = -8;
      }
      //點(diǎn)擊向右滾動(dòng)即觸發(fā)第二個(gè)a元素標(biāo)簽
      oA[1].onclick = function()
      {
          iSpeed = 8;
      }
      //當(dāng)鼠標(biāo)移動(dòng)到div里面的時(shí)候圖片滾動(dòng)暫停，此時(shí)清除定時(shí)器即可。
      oDiv.onmouseover = function()
      {
         clearInterval(timer);
     }
      //當(dāng)鼠標(biāo)移出div的時(shí)候圖片繼續(xù)滾動(dòng)，此時(shí)重新加載定時(shí)器。
     oDiv.onmouseout = function()
      {
          timer=setInterval(fnMove,30);
      }
  }

在代碼中我們通過(guò)設(shè)置函數(shù)，在頁(yè)面中我們可以通過(guò)點(diǎn)擊向那個(gè)方向滾動(dòng)從而實(shí)現(xiàn)，滾動(dòng)的一個(gè)方向（默認(rèn)是向右）。而且當(dāng)我們鼠標(biāo)停留在滾動(dòng)的圖片時(shí)會(huì)停止?jié)L動(dòng)。

以上就是關(guān)于“javascript中如何做圖片滾動(dòng)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

javascript中如何做圖片滾動(dòng)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽