js画像カルーセル手動切り替えエフェクトのサンプルコード

この記事では、主に js 画像カルーセルの手動切り替え効果を詳しく紹介します。興味のある方は参考にしてください。

画像の前後切り替えを実現するには、ScrollPicLeft.js ライブラリを使用します。証明書の表示やおすすめ商品などのコラムを掲載しています。従来のマーキー スクロールとは異なり、前後に切り替える矢印ボタンを手動でクリックして画像のページをめくり、前後の画像を閲覧する効果を得ることができます。
jqueryを呼び出す必要がなく、初期化が簡単で、非常にシンプルで使いやすいです。
効果の例:

js コード:

<script type="text/javascript">
 var scrollPhoto = new ScrollPicleft();
 scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID""
 scrollPhoto.arrLeftId = "Left_Photo";//左箭头ID
 scrollPhoto.arrRightId = "Right_Photo"; //右箭头ID
 scrollPhoto.frameWidth = 450;//显示框宽度
 scrollPhoto.pageWidth = 150; //翻页宽度
 scrollPhoto.speed = 10; //移动速度(单位毫秒，越小越快)
 scrollPhoto.space = 10; //每次移动像素(单位px，越大越快)
 scrollPhoto.autoPlay = false; //自动播放
 scrollPhoto.autoPlayTime = 3; //自动播放间隔时间(秒)
 scrollPhoto.initialize(); //初始化 
</script>

この記事では、js 画像カルーセルの手動切り替え効果について説明します。皆さんの参考に共有してください。詳細は次のとおりです:
これは、js 画像カルーセルに基づいた手動切り替えエフェクト コードであり、実装プロセスは非常に簡単です。
みんなで共有したjs画像カルーセル手動切り替えエフェクトコードは以下の通りです

 
 

 

 

 

 

 

 

 

 

 

 
 

 


<script type="text/javascript">
 var scrollPhoto = new ScrollPicleft();
 scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID""
 scrollPhoto.arrLeftId = "Left_Photo";//左箭头ID
 scrollPhoto.arrRightId = "Right_Photo"; //右箭头ID
 scrollPhoto.frameWidth = 450;//显示框宽度
 scrollPhoto.pageWidth = 150; //翻页宽度
 scrollPhoto.speed = 10; //移动速度(单位毫秒，越小越快)
 scrollPhoto.space = 10; //每次移动像素(单位px，越大越快)
 scrollPhoto.autoPlay = false; //自动播放
 scrollPhoto.autoPlayTime = 3; //自动播放间隔时间(秒)
 scrollPhoto.initialize(); //初始化 
</script>

以上がjs画像カルーセル手動切り替えエフェクトのサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。