사진 점프 만들기 javascript 그림 회전 목마 효과

사진 점프 만들기 javascript 그림 회전 목마 효과_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:15:16

원래의

1741명이 탐색했습니다.

이미지 캐러셀 효과는 오늘날 웹사이트의 홈페이지에 거의 필수 효과이므로 이 효과의 간단한 구현을 세 가지 측면에서 설명하겠습니다.

사진이 튀어요
영상순차제어 구현
전면, 후면 버튼 컨트롤 구현

이번 글에서는 간격에 따라 사진이 바뀌는 모습을 살펴보겠습니다.

먼저 구조 코드를 완성하고, 자세한 설명은 생략하겠습니다

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      box-sizing: border-box;
    }
    a {
      text-decoration: none;
    }
    ul,ol,li{
     list-style: none;
      margin: 0;
      padding: 0;
    }
    #slider{
      width: 800px;
      height: 300px;
      overflow: hidden;
      position: relative;
      margin: 0 auto;
    }
    #slider ul{
      width: 2400px;
      position: relative;
    }
    #slider ul:after{
      content: " ";
      width: 0;
      height: 0;
      display: block;
    }
    #slider ul li{
      float: left;
      width: 800px;
      height: 300px;
      overflow: hidden;
    }
    #slider ul li img{
      width: 100%;
    }
    #slider ol{
      position: absolute;
      bottom: 10px;
      left: 46%;
    }
    #slider ol li{
      display: inline-block;
    }
    #slider ol li a{
      display: inline-block;
      padding:4px 8px;
      border-radius:15px;
      background-color: #000;
      color: #fff;
    }
    #slider .prev, #slider .next{
      display: inline-block;
      position: absolute;
      top: 49%;
      background-color: #000;
      opacity: 0.6;
      color: #fff;
      padding: 3px;
    }
    #slider .prev{
      left: 10px;
    }
    #slider .next{
      right: 10px;
    }
  </style>
</head>
<body>
  
  <div id="slider">
    <ul>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
    </ul>
    <ol>
      <li> <a href="#">1</a> </li>
      <li> <a href="#">2</a> </li>
      <li> <a href="#">3</a> </li>
    </ol>
    <a href="#">上一张</a>
    <a href="#">下一张</a>
  </div>
</body>
</html>

로그인 후 복사

자, 이제 JS를 통해 이미지의 점프를 제어해 보겠습니다.

먼저 사진의 위치를 찾아야 합니다. 여기서는 ul을 사용하여 레이아웃을 작성하므로 먼저 UL 아래의 LI 번호를 찾아야 합니다.

그런 다음 사진을 하나씩 표시해 보겠습니다. 마스크 레이어 모드인 창 모드를 사용했습니다. #슬라이더는 창, ul은 창 밖 풍경, 풍경 ul은 가로로 배열되어 있습니다

그러면 외부 풍경이 창 크기에 맞게 표시됩니다. 즉, 각 그림이 각 창의 풍경으로 사용됩니다. 여기서는 그림 크기가 창 크기와 동일하도록 조절됩니다.

위에서는 레이아웃 처리라는 개념을 설명합니다. 다음으로 JS를 제어합니다. 그림의 표시 간격을 다르게 하려면 JS의 setInterval 또는 setTimeout을 사용해야 합니다. 올라갑니다.)

점프할 때마다 UL 위치의 왼쪽을 조절하여 ul 아래의 풍경이 매번 다르게 표시될 수 있도록 하며, 이 왼쪽은 창의 너비에 따라 결정됩니다. 물론 왼쪽입니다. 는 -800 * 0, 두 번째는 -800*1, 세 번째는 -800*2 등입니다. 그러면 다음 코드를 얻을 수 있습니다

<script>
   (function(){
     var slider = document.getElementById("slider");
     var imgul = slider.getElementsByTagName("ul")[0];
     var imglis = imgul.getElementsByTagName("li");
     var len = imglis.length;
     var index = 0;
     setInterval(function(){
       if(index >= len){
         index = 0;
       }
        imgul.style.left = - (800 * index) + "px";
        index++;
     },2000);
   })();
 </script>

로그인 후 복사

JS 코드는 이렇게 매우 간단해 보입니다. 여기서는 2초 점프 시퀀스를 설정한 다음 점프 횟수가 사진 수보다 크거나 같으면 첫 번째 사진으로 돌아갑니다.