JavaScript에서 이미지의 원활한 왼쪽 및 오른쪽 슬라이딩 전환 효과를 얻는 방법은 무엇입니까?

JavaScript 이미지의 원활한 왼쪽 및 오른쪽 슬라이딩 전환 효과를 얻는 방법은 무엇입니까?

인터넷의 발달과 함께 웹 디자인에서는 이미지가 페이지의 중요한 요소로 사용되는 경우가 많습니다. 그림의 전환 효과는 페이지의 아름다움과 상호 작용에 중요한 영향을 미칩니다. 이 기사에서는 특정 코드 예제를 통해 JavaScript를 사용하여 이미지의 원활한 왼쪽-오른쪽 슬라이딩 전환 효과를 얻는 방법을 살펴보겠습니다.

사진의 원활한 왼쪽 및 오른쪽 슬라이딩 전환 효과를 얻으려면 먼저 다음을 수행해야 합니다.

1. 슬라이딩 전환 효과를 얻기 위해 여러 사진을 배치할 사진 컨테이너를 만듭니다.
2. 이미지 컨테이너를 가로로 배치할 수 있도록 스타일을 설정하고, 컨테이너 너비를 벗어나는 부분은 숨길 수 있습니다.
3. JavaScript를 사용하여 컨테이너 위치를 제어하고 이미지 전환 효과를 얻을 수 있습니다.

다음은 구체적인 코드 예시입니다.

HTML 코드:

<div class="slider-container">
  <ul class="slider-list">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
    <!-- 可以添加更多的图片 -->
  </ul>
</div>
````

CSS 代码：

.slider-container {
너비: 800px; / 컨테이너 너비 설정/
오버플로: 숨김 / 컨테이너 너비/
}

.slider-list {
너비: 300% / 컨테이너 너비를 이미지 전체 너비의 3배로 설정합니다./
디스플레이: flex / 이미지가 가로로 정렬되도록 설정합니다. /
전환: 0.5초 변환; / 전환 효과 추가/
}

.slider-list li {
flex: 1 0 100% / 각 이미지의 너비를 컨테이너 너비의 1/3로 설정합니다. /
}

JavaScript 代码：

function SlideNext() {
let SliderList = document.querySelector('.slider-list');
let currTranslate = window.getCompulatedStyle(sliderList).getPropertyValue('transform'); 현재 컨테이너의 변위 값이 끝에 도달했는지 확인합니다. 그림

if (currTranslate === 'none') currTranslate = 0; // 얻은 초기 변위 값은 'none'이므로 0으로 변환합니다
else currTranslate =parseInt(currTranslate.split(',') [4].trim());

if (currTranslate <= -(sliderList.offsetWidth - document.querySelector('.slider-container').offsetWidth)) {

sliderList.style.transform = `translateX(0px)`; // 如果已经到达最后一张图片，则将容器位移值重置为 0，实现无缝切换

} else {

sliderList.style.transform = `translateX(${currTranslate - document.querySelector('.slider-container').offsetWidth}px)`; // 每次滑动一个图片宽度的距离

}
}

function SlidePrev() {
let SliderList = document.querySelector('.slider-list');
let currTranslate = window.getCompulatedStyle(sliderList).getPropertyValue(' 변환'); // 첫 번째 사진에 도달했는지 확인하는 데 사용되는 현재 컨테이너의 변위 값을 가져옵니다.

if (currTranslate === 'none') currTranslate = 0 // 가져온 초기 변위 값은 ' none', 0으로 변환합니다
else currTranslate =parseInt(currTranslate .split(',')[4].trim());

if (currTranslate >= 0) {

sliderList.style.transform = `translateX(-${sliderList.offsetWidth - document.querySelector('.slider-container').offsetWidth}px)`; // 如果已经到达第一张图片，则将容器位移值设置为最后一张图片的位置，实现无缝切换

} else {

sliderList.style.transform = `translateX(${currTranslate + document.querySelector('.slider-container').offsetWidth}px)`; // 每次滑动一个图片宽度的距离

}
}

setInterval(slideNext, 3000); // 자동 전환을 구현하려면 정기적으로 SlideNext 함수를 호출하세요

以上代码示例中，我们使用了一个图片容器 `.slider-container` ，其中包含了一个图片列表 `.slider-list` ，通过调整列表的位置实现图片的滑动切换效果。在 JavaScript 部分，通过 `slideNext` 和 `slidePrev` 函数控制容器的位移值，从而实现了图片的左右无缝滑动切换。另外，我们还使用了 `setInterval` 函数，使图片能够自动切换。

위 내용은 JavaScript에서 이미지의 원활한 왼쪽 및 오른쪽 슬라이딩 전환 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!