JavaScript で画像のシームレスな左右のスライド切り替え効果を実現するにはどうすればよいですか?

JavaScript 画像のシームレスな左右のスライド切り替え効果を実現するにはどうすればよいでしょうか?

インターネットの発展に伴い、Web デザインでは画像がページの重要な要素として頻繁に使用されます。画像の切り替え効果は、ページの美しさとインタラクティブ性に重要な影響を与えます。この記事では、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 {
width: 800px; / Setコンテナ幅/
overflow: hidden; / コンテナの幅を超える部分を非表示にします/
}

.slider-list {
width : 300%; / コンテナの幅を画像の合計幅の 3 倍に設定します /
display: flex; / 画像の水平方向の配置を設定します /
トランジション: トランスフォーム 0.5 秒; / トランジション効果を追加/
}

.slider-list li {
flex: 1 0 100%; / セット各画像の幅をコンテナの幅の 1/3 に /
}

JavaScript 代码：

function slideNext() {
let sliderList = document.querySelector('.slider-list') ;
let currTranslate = window.getComputedStyle(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.getComputedStyle(sliderList)。 getPropertyValue('transform'); // 最初のピクチャに到達したかどうかを判断するために使用される現在のコンテナのディスプレイスメント値を取得します

if (currTranslate === 'none') currTranslate = 0; //取得された初期ディスプレイスメント値は「なし」で、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 中国語 Web サイトの他の関連記事を参照してください。