Layui を使用して画像をズームインおよびズームアウトするスライドショー効果を実現する方法-jsチュートリアル-php.cn

Layui を使用して画像をズームインおよびズームアウトするスライドショー効果を実現する方法

PHPz

リリース： 2023-10-27 10:51:37

オリジナル

1297 人が閲覧しました

Layui を使用して画像をズームインおよびズームアウトするスライドショー効果を実現する方法

Layui を使用して写真をズームインおよびズームアウトするスライドショー効果を実現する方法

スライドショー効果は、Web サイトで写真を表示する一般的な方法の 1 つです。写真をズームインまたはズームアウトすることでユーザーの注意を引きます。この記事では、Layui フレームワークを使用して画像のズームインおよびズームアウトのスライドショー効果を実現する方法を紹介し、具体的なコード例を示します。

Layui は、豊富なコンポーネントと強力な機能を提供する、シンプルで使いやすいフロントエンド UI フレームワークです。カルーセルコンポーネントを使用すると、スライド効果を実現できます。

まず、Layui の関連リソースファイルを紹介する必要があります。 Layui公式サイト（https://www.layui.com/）から最新版のリソースファイルをダウンロードし、HTMLページに導入できます。

<link rel="stylesheet" href="path/to/layui.css">
<script src="path/to/layui.js"></script>

ログイン後にコピー

次に画像データを用意します。画像のパスは配列に格納できます。この例では、3 つの画像があると仮定します。

var images = [
  "path/to/image1.jpg",
  "path/to/image2.jpg",
  "path/to/image3.jpg"
];

ログイン後にコピー

次に、スライドショーを表示するためのコンテナを作成する必要があります。 HTML に div 要素を追加し、一意の ID を設定します。

<div id="carousel" class="layui-carousel">
  <div carousel-item>
    <!-- 图片放大和缩小区域 -->
  </div>
  <ol class="layui-carousel-ind">
    <!-- 图片索引区域 -->
  </ol>
</div>

ログイン後にコピー

次に、カルーセルコンポーネントを初期化し、画像データをバインドするための JavaScript コードを記述する必要があります。

layui.use(['carousel'], function() {
  var carousel = layui.carousel;
  
  carousel.render({
    elem: '#carousel',
    width: '100%',
    height: '500px',
    arrow: 'always',
    interval: 3000,
    indicator: 'inside'
  });
  
  var carouselInst = carousel.instance();
  carouselInst.reload({
    elem: '#carousel',
    width: '100%',
    height: '500px',
    arrow: 'always',
    interval: 3000,
    indicator: 'inside',
    anim: 'fade',
    data: images
  });
});

ログイン後にコピー

上記のコードでは、最初にlayui.useメソッドを使用してカルーセルコンポーネントを読み込みます。次に、carousel.render メソッドを使用して、コンテナの ID、幅、高さ、矢印表示モード、切り替え間隔、インジケーターの位置など、カルーセルコンポーネントのいくつかの構成オプションを初期化します。次に、carousel.instance メソッドを呼び出して Carousel インスタンスを取得し、carouselInst.reload メソッドを使用して Carousel コンポーネントの構成オプションを再読み込みし、data 属性を通じて画像データを Carousel コンポーネントにバインドします。

これで、Layui を使用して画像をズームインおよびズームアウトするスライドショー効果を実現するコードが完成しました。次に、画像を拡大および縮小する効果を使用して画像を表示する必要があります。これを実現するには、画像拡大プラグインを使用します。

<link rel="stylesheet" href="path/to/layui.css">
<script src="path/to/layui.js"></script>
 
 


  
    
      
      
        
      
    
  
  
    
  


<script>
  layui.use(['carousel'], function() {
    var carousel = layui.carousel;

    carousel.render({
      elem: '#carousel',
      width: '100%',
      height: '500px',
      arrow: 'always',
      interval: 3000,
      indicator: 'inside',
      anim: 'fade'
    });
    var carouselInst = carousel.instance();
    carouselInst.reload({
      elem: '#carousel',
      width: '100%',
      height: '500px',
      arrow: 'always',
      interval: 3000,
      indicator: 'inside',
      anim: 'fade',
      data: images
    });

    $(".imgbox").imgbox({
      'zoomrange': [1.2, 10], // 图片放大的范围
      'maxsize': [800, 600], // 图片的最大尺寸
      'minsize': [100, 100], // 图片的最小尺寸
      'info': true // 是否显示图片详情
    });
  });
</script>