js圖片輪播手動切換效果_javascript技巧

利用ScrollPicLeft.js這個函式庫實作圖片的前後切換，適用於網頁中的憑證展示、推薦商品之類的欄位。它不像傳統的marquee滾動那樣，而是可以手動的去點擊前後切換箭頭按鈕，進行圖片的翻頁，從而達到瀏覽上一張，下一張的效果。
不需要呼叫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圖片輪播手動切換效果

以上就是為大家分享的js圖片輪播手動切換效果程式碼，希望大家可以喜歡，並應用到實作中。