JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현-JS 튜토리얼-php.cn

JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현

JavaScript는 웹 페이지에 대화형 효과를 추가하는 데 사용할 수 있는 스크립팅 언어입니다. 그중 이미지 캐러셀과 슬라이드쇼 효과는 일반적인 웹 페이지 애니메이션 효과입니다. 이 기사에서는 JavaScript 기능을 사용하여 이 두 가지 효과를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

사진 회전판

사진 회전판은 여러 장의 사진을 특정 방식으로 회전시키는 효과입니다. 이미지 캐러셀을 구현할 때 JavaScript 타이머와 CSS 스타일 컨트롤을 사용해야 합니다.

(1) 준비

먼저 HTML 파일에서 캐러셀 이미지를 표시할 div 컨테이너를 정의해야 합니다. 회전해야 하는 모든 이미지를 저장하기 위해 또 다른 ul 요소를 정의할 수 있습니다. 각 li 요소에는 이미지가 포함되어 있습니다.

<div id="slider">
  <ul>
    <li><img  src="/static/imghw/default1.png"  data-src="img1.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" ></li>
    <li><img  src="/static/imghw/default1.png"  data-src="img2.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" ></li>
    <li><img  src="/static/imghw/default1.png"  data-src="img3.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" ></li>
    <li><img  src="/static/imghw/default1.png"  data-src="img4.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" ></li>
  </ul>
</div>

로그인 후 복사

CSS 파일에서 이러한 요소에 대한 일부 스타일을 지정해야 합니다. 예를 들어 div 컨테이너의 너비와 높이를 이미지의 실제 크기로 설정하고, 오버플로 속성을 숨김으로 설정하면 컨테이너 너머의 부분을 숨길 수 있습니다. 동시에 ul 요소의 너비를 모든 이미지의 너비의 합으로 설정하고, 높이를 이미지의 실제 높이로 설정합니다.

#slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#slider ul {
  width: 2400px; /* 4张图片的宽度之和 */
  height: 400px;
  position: absolute;
  left: 0;
}

로그인 후 복사

(2) 회전판 구현

다음으로 회전판 효과를 구현하려면 JavaScript 함수를 사용해야 합니다. 구체적인 구현 과정은 다음과 같습니다.

① 현재 표시된 이미지의 일련 번호를 기록하기 위해 변수 인덱스를 정의합니다.

var index = 0;

로그인 후 복사

② 특정 간격으로 그림을 전환하고 인덱스 변수의 값을 업데이트하는 캐러셀 기능을 작성하세요. 이 함수에서 ul 요소의 왼쪽 값은 현재 이미지 너비의 역수(음수)로 설정되어야 캐러셀 효과를 얻을 수 있습니다.

function slide() {
  index++;
  if (index >= 4) {  // 图片总数为4，如果index超过4，就将其重置为0
    index = 0;
  }
  var leftVal = -index * 600 + "px";  // 每次切换，将ul元素的left值设置为当前图片的宽度的相反数
  $("#slider ul").stop().animate({left: leftVal}, 500);  // 使用jQuery的animate方法实现滑动效果
}

로그인 후 복사

위 코드에서는 애니메이션 효과를 얻는 데 사용할 수 있는 jQuery 라이브러리의 animate() 메서드를 사용했습니다. animate() 메서드는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 애니메이션의 CSS 속성과 값을 설정하는 데 사용되는 개체입니다. 여기서는 ul 요소의 왼쪽 속성을 설정하는 데 사용되는 숫자입니다. 애니메이션 실행 시간을 밀리초 단위로 지정합니다.

3 캐러셀 함수를 호출하고 setInterval() 메소드를 사용하여 정기적으로 실행합니다.

setInterval(slide, 2000);

로그인 후 복사

위 코드에서는 지정된 코드를 정기적으로 실행하는 데 사용할 수 있는 setInterval() 메서드를 사용합니다. 첫 번째 매개변수는 정기적으로 실행될 함수의 이름이고, 두 번째 매개변수는 밀리초 단위의 시간 간격입니다.

마지막으로 전체 사진 캐러셀의 구현 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <title>图片轮播</title>
  <meta charset="utf-8">
  <style>
    #slider {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }

    #slider ul {
      width: 2400px;
      height: 400px;
      position: absolute;
      left: 0;
    }

    #slider ul li {
      float: left;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function () {
      var index = 0;

      function slide() {
        index++;
        if (index >= 4) {
          index = 0;
        }
        var leftVal = -index * 600 + "px";
        $("#slider ul").stop().animate({left: leftVal}, 500);
      }

      setInterval(slide, 2000);
    })
  </script>
</head>
<body>
  <div id="slider">
    <ul>
      <li><img  src="/static/imghw/default1.png"  data-src="img1.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" ></li>
      <li><img  src="/static/imghw/default1.png"  data-src="img2.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" ></li>
      <li><img  src="/static/imghw/default1.png"  data-src="img3.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" ></li>
      <li><img  src="/static/imghw/default1.png"  data-src="img4.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" ></li>
    </ul>
  </div>
</body>
</html>

로그인 후 복사

슬라이드쇼 효과

슬라이드쇼 효과는 여러 장의 사진을 특정 순서로 전환하는 효과입니다. 슬라이드 효과를 구현할 때 JavaScript 이벤트 청취 및 CSS 스타일 제어가 필요합니다.

(1) 준비

마찬가지로 HTML 파일에서도 슬라이드를 표시하기 위한 div 컨테이너를 정의해야 합니다. 여러 img 요소를 정의할 수 있으며 각 img 요소에는 그림이 포함됩니다.

<div id="slideshow">
  <img  src="/static/imghw/default1.png"  data-src="img1.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" >
  <img  src="/static/imghw/default1.png"  data-src="img2.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" >
  <img  src="/static/imghw/default1.png"  data-src="img3.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" >
  <img  src="/static/imghw/default1.png"  data-src="img4.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" >
</div>

로그인 후 복사

CSS 파일에서 이러한 요소의 스타일을 지정해야 합니다. 예를 들어 div 컨테이너의 너비와 높이를 이미지의 실제 크기로 설정하고 오버플로 속성을 숨김으로 설정하여 겹쳐서 표시할 수 있도록 모든 img 요소의 위치를 절대값으로 설정합니다. 첫 번째 이미지 이미지의 투명도는 0으로 설정됩니다.

#slideshow {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#slideshow img:first-child {
  opacity: 1;
}

로그인 후 복사

위 코드에서는 :first-child 의사 클래스를 사용하여 첫 번째 이미지의 투명도를 1로 설정했습니다.

(2) 슬라이드쇼 구현

다음으로 슬라이드쇼 효과를 구현하려면 JavaScript 함수를 사용해야 합니다. 구체적인 과정은 다음과 같습니다.

① 현재 표시된 사진의 일련번호를 기록하기 위한 변수 인덱스를 정의합니다.

var index = 1;

로그인 후 복사

② 그림을 전환하고 인덱스 변수의 값을 업데이트하는 함수를 작성하세요. 이 함수에서는 먼저 현재 표시되는 이미지의 투명도를 0으로 설정한 후 index 변수의 값에 1을 더하여 전체 이미지 개수를 초과하는지 여부를 판단합니다. 초과하는 경우 1로 재설정합니다. 그런 다음 다음 이미지의 투명도를 1로 설정하고 애니메이션을 적용합니다.

function show() {
  $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 0}, 1000); // 当前图片透明度减少
  index++;
  if (index > 4) {
    index = 1;
  }
  $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 1}, 1000); // 下一张图片透明度增加
}

로그인 후 복사

위 코드에서는 지정된 상위 요소 아래의 하위 요소를 선택할 수 있는 :nth-child 선택기를 사용합니다. 이 예에서는 이 선택기를 사용하여 인덱스 이미지를 선택합니다.

3 정기적으로 show 함수를 실행하려면 setInterval() 메소드를 사용하세요.

$(function () {
  setInterval(show, 3000);
})

로그인 후 복사

위 코드에서는 jQuery 라이브러리의 $() 메서드와 setInterval() 메서드를 사용하여 예약된 호출을 구현했습니다. $() 메소드는 지정된 요소를 가져오는 데 사용되며 setInterval() 메소드는 지정된 함수를 주기적으로 호출할 수 있습니다.

마지막으로 전체 슬라이드쇼 효과를 구현하는 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <title>幻灯片效果</title>
  <meta charset="utf-8">
  <style>
    #slideshow {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }

    #slideshow img {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

    #slideshow img:first-child {
      opacity: 1;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function () {
      var index = 1;

      function show() {
        $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 0}, 1000);
        index++;
        if (index > 4) {
          index = 1;
        }
        $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 1}, 1000);
      }

      setInterval(show, 3000);
    })
  </script>
</head>
<body>
  <div id="slideshow">
    <img  src="/static/imghw/default1.png"  data-src="img1.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" >
    <img  src="/static/imghw/default1.png"  data-src="img2.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" >
    <img  src="/static/imghw/default1.png"  data-src="img3.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" >
    <img  src="/static/imghw/default1.png"  data-src="img4.jpg"  class="lazy" alt="JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현" >
  </div>
</body>
</html>

로그인 후 복사

위의 코드 예시를 통해 이미지 캐러셀과 슬라이드쇼 효과를 구현하기 위한 자바스크립트 함수를 구현하고 구체적인 구현 과정을 소개했습니다. 이러한 기술은 웹 페이지 상호 작용 및 애니메이션 효과를 향상시키는 데 매우 유용합니다. 독자는 실제 필요에 따라 수정하고 최적화할 수 있으며 지속적으로 개발 능력을 향상시킬 수 있습니다.

위 내용은 JavaScript 기능을 사용하여 이미지 캐러셀 및 슬라이드쇼 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!