집 > 기사 > 웹 프론트엔드 > 자바스크립트로 구현된 왼쪽 및 오른쪽 원활한 스크롤 효과

자바스크립트로 구현된 왼쪽 및 오른쪽 원활한 스크롤 효과

高洛峰원래의: 2017-01-18 13:39:561352검색

이 기사의 예에서는 자바스크립트로 구현되는 왼쪽 및 오른쪽 원활한 스크롤 효과를 설명합니다. 참고하실 수 있도록 모두와 공유해 주세요. 자세한 내용은 다음과 같습니다.

오늘은 흔히 사용되는 js 효과인 여러 장의 사진을 함께 원활하게 스크롤하는 방법을 소개합니다.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>无缝滚动——左右</title>
  <link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/>
  <style type="text/css">
  #scroll{width:698px;height:108px;margin:50px auto 0;position:relative;overflow:hidden;}
  .btn_left{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat -70px -69px;position:absolute;top:20px;left:1px;z-index:1;}
  .btn_left:hover{background:url(images/btn.jpg) no-repeat -70px 0;}
  .btn_right{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat 1px -69px;position:absolute;top:20px;right:0;z-index:1;}
  .btn_right:hover{background:url(images/btn.jpg) no-repeat 1px 0;}
  #scroll .content{width:546px;height:108px;position:relative;overflow:hidden;margin:0 auto;}
  #scroll ul{position:absolute;}
  #scroll li{float:left;width:182px;height:108px;text-align:center;}
  #scroll li a:hover{position:relative;top:2px;}
  </style>
</head>
<body>
  <p id="scroll">
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <p>
      <ul>
        <li><a href="#"><img src="images/1.jpg" width="178" height="108" alt=""/></a></li>
        <li><a href="#"><img src="images/2.jpg" width="178" height="108" alt=""/></a></li>
        <li><a href="#"><img src="images/3.jpg" width="178" height="108" alt=""/></a></li>
        <li><a href="#"><img src="images/4.jpg" width="178" height="108" alt=""/></a></li>
      </ul>
    </p>
  </p>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
  var oDiv = document.getElementById(&#39;scroll&#39;);
  var oUl = oDiv.getElementsByTagName(&#39;ul&#39;)[0];
  var aLi = oDiv.getElementsByTagName(&#39;li&#39;);
  var aBtn = oDiv.getElementsByTagName(&#39;a&#39;);
  var speed = -1;
  var timer = null;
  oUl.innerHTML += oUl.innerHTML;
  oUl.style.width = aLi[0].offsetWidth * aLi.length + &#39;px&#39;;
  timer = setInterval(function(){
    oUl.style.left = oUl.offsetLeft + speed + &#39;px&#39;;
    if(oUl.offsetLeft < - oUl.offsetWidth / 2){
      oUl.style.left = &#39;0&#39;;
    }else if(oUl.offsetLeft > 0){
      oUl.style.left = - oUl.offsetWidth / 2 + &#39;px&#39;;
    }
  },30);
  aBtn[0].onclick = function(){
    speed = -1;
  };
  aBtn[1].onclick = function(){
    speed = 1;
  };
  oUl.onmouseover = function(){
    clearInterval(timer);
  };
  oUl.onmouseout = function(){
    timer = setInterval(function(){
      oUl.style.left = oUl.offsetLeft + speed + &#39;px&#39;;
      if(oUl.offsetLeft < -oUl.offsetWidth / 2){
        oUl.style.left = &#39;0&#39;;
      }else if(oUl.offsetLeft > 0){
        oUl.style.left = - oUl.offsetWidth / 2 + &#39;px&#39;;
      }
    },30);
  };
};
</script>

PS: 이동 속도를 변경하려면 속도 값만 변경하면 됩니다.

이 글이 JavaScript 프로그래밍에 종사하는 모든 분들께 도움이 되기를 바랍니다.

자바스크립트로 구현한 좌우 연속 스크롤 효과에 대한 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!

성명：

이전 기사：Javascript를 사용하여 이미지의 원래 너비와 높이를 얻는 방법에 대한 자세한 설명다음 기사：Javascript를 사용하여 이미지의 원래 너비와 높이를 얻는 방법에 대한 자세한 설명

자바스크립트로 구현된 왼쪽 및 오른쪽 원활한 스크롤 효과

관련 기사