js画像カルーセル手動切り替え効果_javascriptスキル-jsチュートリアル-php.cn

js画像カルーセル手動切り替え効果_javascriptスキル

WBOY

リリース： 2016-05-16 15:32:55

オリジナル

1504 人が閲覧しました

ScrollPicLeft.js ライブラリを使用して画像を前後に切り替えます。これは、Web ページの証明書表示や推奨製品などのコラムに適しています。従来のマーキースクロールとは異なり、手動で前後の切り替え矢印ボタンをクリックして画像のページをめくり、前後の画像を閲覧する効果を得ることができます。
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画像カルーセルのエフェクトを手動で切り替えるコードは以下の通りです



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>